时间戳

首页 > 解决方案 > useState 创建多个数组

javascript - useState 创建多个数组

问题描述

我正在创建一个下拉过滤器来使用反应钩子更新页面的搜索结果。基本上，我传递了一个数组，其中包含用户从下拉菜单中选择的选项。我用新数组成功更新了全局状态，但我的问题是 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])]) :
...

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

标签： javascriptarraysreactjsreact-hooksuse-state

解决方案

发生这种情况是因为newFilter它是一个数组，而不是一个单词。应该

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

还有这个

let indexFilter = filterList.indexOf(newFilter);

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

推荐阅读