在购物车应用程序中选择项目后，反应动态搜索栏不更新列表

Question

我正在尝试编写一个购物车应用程序，当我们在搜索栏中输入一个值时，它应该更新列表并根据输入的值显示可用的项目。使用我编写的代码，一切正常，直到我制作了一个项目的 selection，该项目没有在第一次更新视图并显示所有频道。（我认为状态在第一次没有更新，但是正在做第二次)

我对反应还很陌生。我试图在这里只添加必要的代码来解决问题。

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 应该在我每次 select 项目时更新并且应该立即更改视图，但是使用当前代码，它会在我输入另一个值或下次更新 selection 时更新。请帮助，我已经尝试了好几天了，但没有任何改善。如果建议比我写的更简单的方法，我会很高兴。

Answer 1

setState() 是异步的，所以试试：

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

在购物车应用程序中选择项目后，反应动态搜索栏不更新列表

React dynamic search bar not updating the list after selection of an item in shopping cart app

javascript

search

setstate

reactjs

react-native