从redux为props分配状态不起作用

Question

import React, { Component } from 'react';
import DisplayTable from './Table.js';

class App extends Component {
  constructor(props) {
   super(props);
   this.state = {
     menuItems: this.props.menu_items,
     searchString: '',
     displayItems: this.props.menu_items
   }
 this.search = this.search.bind(this);
 this.handleChange = this.handleChange.bind(this);
}

componentWillMount() {
   this.props.get_menu_items_api(false);
 }

componentWillReceiveProps(nextProps) {
   this.setState({ menuItems: nextProps.menu_items })
}

handleChange(e, isEnter) {
 const searchData = () => {
  let tempMenuProductDetails = this.props.menu_items;
  const filterArray = tempMenuProductDetails.reduce((result, category) => {
    if (category.categoryName.toLowerCase()
   .indexOf(this.state.searchString.toLowerCase()) > -1) {
      result.push(category);
    }
    if (category.productList && category.productList.length > 0) {
      category.productList = category.productList.reduce((productListResult, 
      productList) => {
        if (!!productList.productName && 
            productList.productName.toLowerCase()
           .indexOf(this.state.searchString.toLowerCase()) > -1)
        {
          productListResult.push(productList);
        }
        return productListResult;
      }, []);
    }

    return result;
    }, []);
     this.setState({
     displayItems: filterArray
   }, function () {
    console.log(this.state.displayItems);
   })
   console.log(filterArray);
   }
   if (!isEnter) {
    this.setState({
     searchString: e.target.value
  });
  } else {
  searchData();
 }
  }

 search(e) {
  if (e.keyCode == 13) {
  this.handleChange(e, true);
 }
  this.handleChange(e, false);
 }

 render() {
   console.log(this.state.displayItems);
   console.log(this.props.menu_items);
   console.log(this.state.menuItems);
   return (
      <DisplayTable dataProp={this.state.displayItems} editFuncProp=
       {this.props.edit_menu_items_api} />  )
         }
   }

  export default App;

我在这个文件中有这个搜索功能，它不会更新来自redux容器的props的值。现在，当我在菜单中传递{this.state.displayItems}时，它不会显示数据。

但是当我通过{this.props.menu_items}时，它会显示数据，而我无法在搜索的基础上修改this.props.menu_items。 我试过这段代码。我该怎么办？

Answer 1

问题似乎是，最初this.props.menu_items是一个空数组，只有在一些API调用之后，值才会更新，并且在第二次渲染时得到返回的数组，因此如果你使用它就像

<DisplayTable dataProp={this.props.menu_items} editFuncProp=
   {this.props.edit_menu_items_api} />

它有效。现在您使用

<DisplayTable dataProp={this.state.displayItems} editFuncProp=
   {this.props.edit_menu_items_api} />

和displayItems仅在构造函数中初始化，该构造函数当时只执行一次，组件被挂载，因此没有显示任何内容。

解决方案似乎是您更新displayItems中的componentWillReceiveProps状态并使用当前搜索字符串再次调用搜索功能，以便您的搜索结果得到更新。

代码：

import React, { Component } from 'react';
import DisplayTable from './Table.js';

class App extends Component {
  constructor(props) {
   super(props);
   this.state = {
     menuItems: this.props.menu_items,
     searchString: '',
     displayItems: this.props.menu_items
   }
 this.search = this.search.bind(this);
 this.handleChange = this.handleChange.bind(this);
}

componentWillMount() {
   this.props.get_menu_items_api(false);
 }

componentWillReceiveProps(nextProps) {
   this.setState({ menuItems: nextProps.menu_items, displayItems: nextProps.menu_items })
   this.handleChange(null, true);
}

handleChange(e, isEnter) {
 const searchData = () => {
  let tempMenuProductDetails = this.props.menu_items;
  const filterArray = tempMenuProductDetails.reduce((result, category) => {
    if (category.categoryName.toLowerCase()
   .indexOf(this.state.searchString.toLowerCase()) > -1) {
      result.push(category);
    }
    if (category.productList && category.productList.length > 0) {
      category.productList = category.productList.reduce((productListResult, 
      productList) => {
        if (!!productList.productName && 
            productList.productName.toLowerCase()
           .indexOf(this.state.searchString.toLowerCase()) > -1)
        {
          productListResult.push(productList);
        }
        return productListResult;
      }, []);
    }

    return result;
    }, []);
     this.setState({
     displayItems: filterArray
   }, function () {
    console.log(this.state.displayItems);
   })
   console.log(filterArray);
   }
   if (!isEnter) {
    this.setState({
     searchString: e.target.value
  });
  } else {
  searchData();
 }
  }

 search(e) {
  if (e.keyCode == 13) {
  this.handleChange(e, true);
 }
  this.handleChange(e, false);
 }

 render() {
   console.log(this.state.displayItems);
   console.log(this.props.menu_items);
   console.log(this.state.menuItems);
   return (
      <DisplayTable dataProp={this.state.displayItems} editFuncProp=
       {this.props.edit_menu_items_api} />  )
         }
   }

  export default App;