将第一个元素保存到待办事项中的数组时出现问题

Question

我在 React 中使用 react-hooks 的简单待办事项应用程序有问题。

当我获取我的输入值并尝试将其分配给对象并保存到我的项目 Array 中时，它不起作用。

( onSubmit 操作后的第一个分配是空数组，我完全不知道为什么。但是第二个按钮操作工作正常。

有人可以在这里帮我吗？

https://codesandbox.io/s/young-sun-r2jdp?fontsize=14

Answer 1

问题是你在设置新项目后立即执行console.log，但 React 会在新的重新渲染时进行更新，因此在组件重新渲染之前您不会看到更改。

为了进行测试，您可以通过在button元素下方添加以下内容来呈现当前项目：

<p>Got items:</p>
{items.map((item, i) => (
<div key={i}>{item.name}</div>
))}
</div>

Answer 2

你可以在useEffect钩子中做这种副作用(如控制台.log)，它将在每次items变量更新后运行，并会记录正确的事情

useEffect(() => {
console.log(items);
}, [items])