分配狀態道具終極版不起作用

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;