尝试使用反应钩子设置状态，但我得到的是一个空数组[关闭]答案

【问题标题】：Trying to setState using react hooks but what I get is an empty array [closed]尝试使用反应钩子设置状态，但我得到的是一个空数组[关闭]
【发布时间】：2020-11-03 20:41:51
【问题描述】：

正如你所见，我对 React.js 还很陌生。在这里，我正在尝试创建一个待办事项列表应用程序。它的顶部应该有三个按钮——一个用于显示已完成的任务，第二个用于未完成的任务，最后一个用于显示列表中的所有任务。所以，我需要两个列表——一个用于添加到列表中的每个项目，另一个用于过滤我猜。问题是在这种情况下我无法掌握状态，我的过滤器数组是空的。我不想直接改变状态，但尝试了很多事情，我不得不做错事。这是第一个按钮的代码。

我想点击按钮，重新渲染网站并获得过滤项目列表。

 //todos, setTodos are for my primary state

 const TodoFilter = ({ todos, setTodos}) => {

 const [filter, setFilter] = useState([])

 const handleActive = () => {
 const allTodos = [...todos]

 const completedFilter = allTodos.filter(item => item.isComplete === true)   

 setFilter(completedFilter)

 }

【问题讨论】：

const handleActive = () => 不是有效的 JS
是的，不知道为什么，但是代码的一部分被删掉了。
从代码/语法的角度来看，它看起来不错。（对于您的 handleActive 函数，除了缺少的右括号之外）。你可能会更好地放置更多代码，或者一个可运行的 sn-p / jsfiddle
另外，你不需要传播todos 来创建allTodos，因为Array.prototype.filter() 无论如何都会返回一个新数组

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

【解决方案1】：

您的代码丢失了很多，所以不确定这是您目前编码的所有内容，还是您没有包含其他一些位。您需要添加一个复选框来检查已完成的待办事项，然后再清除它们。

请尝试使用下面的代码从未完成的待办事项中过滤已完成的待办事项，并假设您有一个清除它的按钮。希望这会有所帮助

function handleCleartodos() {
const completedFilter = allTodos.filter(item => !item.isComplete)
setFilter(completedFilter)
}

<button onClick={handleCleartodos}>Clear Todos</button>

【讨论】：

您究竟希望这样做有何不同？ filter 不会更改原始数组，因此更改为此代码将触发重新渲染，而不会更改状态。
是的，我刚刚发布了一小部分代码，因为我有 4 个组件。问题是我在你发布之前尝试过你的方式，但状态没有改变，因为我有两种不同的状态可以切换。我想由于 useState() 的异步性质，我需要从 todos 复制内容以通过 setFilter 过滤并使过滤器显示自己而不是渲染 todos：D 我猜有点混乱：D