useState 创建多个数组答案

【问题标题】：useState creating multiple arraysuseState 创建多个数组
【发布时间】：2020-09-17 03:36:00
【问题描述】：

我正在创建一个下拉过滤器来使用反应钩子更新页面的搜索结果。基本上，我传递了一个数组，其中包含用户从下拉菜单中选择的选项。我成功地使用新数组更新了全局状态，但我的问题是 useState 创建了一个新数组，而不是将结果与以前的状态合并。

如您所见，我使用不同的过滤器选项进行了两次调用，全局状态现在包含 2 个数组。我的目标是将两个数组合并为一个。

这是更新全局状态的函数。

const Results = () => {
    const [filterList, setFilterList] = useState([])

    const setGlobalFilter = (newFilter) => {
        let indexFilter = filterList.indexOf(newFilter);

        // console.log("Top level index", indexFilter)

        indexFilter ?
        setFilterList([...new Set([...filterList, newFilter])]) :
        setFilterList(filterList => filterList.filter((filter, i) => i !== indexFilter))
    }

    // console.log("TopFilterSelection:", filterList)
    return (
        <div>
            <Filter setFilter={(filterList) => setGlobalFilter(filterList)}/>
        </div>
    )
}

我一直在检查这样使用 prevState：

...
        setFilterList(prevState => [...new Set([...prevState, newFilter])]) :
...

但我不知道我做错了什么。任何反馈将不胜感激！

【问题讨论】：

标签： javascript arrays reactjs react-hooks use-state

【解决方案1】：

这是因为newFilter 是一个数组，而不是一个单词。应该是

setFilterList(previous => [...new Set([...previous, ...newFilter])])

还有这个

let indexFilter = filterList.indexOf(newFilter);

如果newFilter是一个数组，总是返回-1（因为你每次都发送一个全新的数组），这不是一个假值，小心

【讨论】：

【解决方案2】：

使用.concat 方法。

setFilterList(filterList.concat(newFilter))

【讨论】：