分配状态道具终极版不起作用

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; 

---

我在这个文件里搜索功能，不更新道具终极版的容器未来的价值。现在，当我在菜单中传递{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仅在其中仅在时间执行一次构造函数初始化，组件安装，因此是越来越显示任何内容。

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

代码：

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;