reactjs - React Hooks State 只更新一次 Type:error not a function

Question

我附上了我的代码和我得到的错误的屏幕截图。

这是概述；我是使用钩子的新手，我试图让我的待办事项列表复选框保存在状态中，选中时等于 true，未选中时为 false。第一次单击复选框起作用并更新状态，但随后每次尝试选中或取消选中一个框都会导致TypeError：prevState.map 不是函数（参见图 2）。

1 image 1：选中该框，它工作正常并更新状态。

2图像 2：尝试再次单击复选框导致地图错误。

3图 3：主应用程序代码。

4图 4：待办事项列表组件代码。

我对为什么我的代码不起作用感到困惑，并寻求帮助以解决此错误。

谢谢你。

标签： reactjsreact-hooks

Answer 1

当您将函数传递给 时setList，您始终将状态的最新值作为第一个参数。在您第一次使用它之后，您将返回一个 object { updatedTodos }。您应该返回数组updatedTodos。在这种情况下，您甚至不需要声明变量，只需使用短箭头返回：

setList(prevState => prevState.map(todo => {
    if (todo.id === id) {
        return {...todo, completed: !todo.completed}
    }
    return todo
}))