在React中使用钩子切换布尔值

Question

使用钩子进行第一次尝试，并遇到了一些切换布尔值的问题。我可以在单个项目上单击“完成”时切换样式，但是当我在另一个项目上单击另一个“完成”时，直到第二次单击时，它才会触发。

下面是沙箱网址，可帮助解释我遇到的问题。

https://codesandbox.io/s/react-to-do-with-hooks-mpqfl

Answer 1

您不需要status即可在这里实现您想要的目的。

这是一个更新的沙箱，可以按预期https://codesandbox.io/s/react-to-do-with-hooks-tvyg2

运行

您的沙箱不起作用，因为您仅使用1个变量status来控制所有待办事项。

为更好地说明问题，请说有2个待办事项：
1.学习反应
2.与朋友共进午餐

首先，status的默认值为false，然后将第一个标记为完成，并将status的值设置为true。

1。学习反应
2.与朋友共进午餐

到目前为止，一切都按预期进行。

现在status的值为true

当您尝试使用此处的代码将第二项标记为已完成时：

 newTodos[index].isCompleted = !status;

再次为

isCompleted分配了false，即由于!status是false，因此未完成。因此，您的“待办事项”列表中不会发生任何变化。

在此行之后，您再次在此处将status设置为false。

setStatus(!status);

现在status的新值是false。 因此，当您第二次单击相同的“待办事项”时，isCompleted设置为!status，即true，并且列表更改为：

1。学习反应
2。遇见朋友共进午餐

由于您仅使用1个变量来跟踪所有待办事项的状态，因此您正面临观察到的行为
即您必须单击两次按钮才能将其标记为完成