在购物车应用程序中选择商品后，React动态搜索栏不更新列表

Question

我正在尝试写一个购物车应用程序，当我们在搜索栏中输入一个值时，它应该更新列表，并根据输入的值显示可用项目。使用我编写的代码，一切都很好，直到我选择了一个第一次不更新视图并显示所有频道的项(我认为state不是第一次更新，而是第二次更新)。

我还是个新手。我试图在这里只添加解决方案所需的代码。

state = { open: false, value: '', filteredSections: 'none', displaySections: [] };

filterFunction(e, someSections) {
    const filteredSections = [];
    this.setState({ value: e.target.value });
    someSections.forEach((category) => {
        const results = [];
        const itemCopy = {...category};
        category.arraysinside.forEach((item) => {
            if (item.name.toLowerCase().includes(e.target.value.toLowerCase())) { results.push(item); }
        });
        itemCopy.arraysinside = results;
        if (itemCopy.arraysinside.length > 0) { filteredSections.push(itemCopy); }
    });
    this.setState({ filteredSections: filteredSections });
    return filteredSections;
}
updateFunction(displaySections) {
    this.setState({ displaySections: displaySections });
}
onChange(opt) {
    // makes item selected and changes color of item to know that item is selected
}
render() {
    const someSections = customization.arraysinside.filter(c => c.has === 'channels');
    let { displaySections, filteredSections } = this.state;
    return (
        <div>
         <FormControl
             name="search-items"
             placeholder="Search items"
             onChange={(e) => {
             filteredSections = this.filterFunction(e, someSections);
                                this.setState({
                                    displaySections: filteredSections.length > 0 ? displaySections = filteredSections : 'No',
                                    value: this.state.value,
                                });
                            }}
                        />
            <div>
                {displaySections.length > 0 ? displaySections.map(section =>
                    <someSections
                        onChange={(opt) => {
                            onChange(opt);
                            this.updateFunction(opt, displaySections);
                        }}
                 :
                    someSections.map(section =>
                        <someSections
                            onChange={opt => onChange(opt)}
                         />)
                }
            </div>
        </div>
    );
}
}

JSON格式将是

{
  "name": "product 1",
  "has": "channels",
  "arraysinside": [
    { "selected": false, "name": "Item 1"},
    { "selected": false, "name": "Item 2"},
    { "selected": false, "name": "Item 3"},
    { "selected": false, "name": "Item 4"},
  ],
},
{
  "name": "product 2",
  "has": "channels",
  "arraysinside": [
    { "selected": false, "name": "Item 1"},
    { "selected": false, "name": "Item 2"},
    { "selected": false, "name": "Item 3"},
    { "selected": false, "name": "Item 4"},
  ],
},

displaySections应该在我每次选择项目时更新，并且应该立即更改视图，但是使用当前代码，它会在我下次输入另一个值或更新选择时更新。PLease帮助，我已经尝试了几天了，但没有任何改善。如果有人建议用一种比我写的更容易的方式，我会很高兴的。

Answer 1

setState()是异步的，因此请尝试：

this.setState({ value: e.target.value }, () => { ... do stuff relying on value })；