如何解决useState创建多个数组
我正在创建一个下拉过滤器,以使用react钩子更新页面的搜索结果。基本上,我要传递一个数组,其中包含用户从下拉菜单中选择的选项。我成功地使用新数组更新了全局状态,但是我的问题是useState创建了一个NEW数组,而不是将结果与先前状态合并。
上面您可以看到,我使用不同的过滤器选项进行了两次调用,并且全局状态现在包含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])]) :
...
但是我不知道我在做什么错。 任何反馈将不胜感激!
解决方法
发生这种情况是因为newFilter
是一个数组,而不是一个单词。
应该是
setFilterList(previous => [...new Set([...previous,...newFilter])]
也是这个
let indexFilter = filterList.indexOf(newFilter);
如果newFilter
是一个数组(每次都会发送一个全新的数组),则始终返回-1,这不是一个虚假的值,请小心
使用.concat
方法。
setFilterList(filterList.concat(newFilter))
在此处阅读有关此内容的更多信息: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。