Arrays 第一次单击时未更新数组

制作一个小的todo应用程序，我想添加一个功能，即当任务被选中时，被选中的任务将进入一个数组。在第一次单击任务时，控制台将显示一个空数组，然后在取消选中并再次选中时，我的数组将被更新。为什么需要两次单击才能更新阵列

函数选择todo（{todo}）{
const[checkboxChecked，setCheckboxChecked]=React.useState（[]）；
常量handleInputChange=（e）=>{
const checked=e.target.checked；
设值=e.target.value；
如果（选中）{
setCheckboxChecked（（prevChecked）=>[…prevChecked，值]；
日志（“checkboxarray:+checkboxChecked”）；
}否则{
控制台日志（“未选中”）；
}
};
返回(
{todo}
);
}
render（，document.getElementById（“根”））
设置状态为React中的
异步
进程

这意味着，调用
setCheckboxChecked
并立即尝试读取
checkboxChecked
的值将为您提供当前值，而不是更新值

这意味着数组实际上正在更新，但您只记录了旧值，因此似乎需要单击两次

如果要检查更新的值，请执行此操作

setCheckboxChecked((prevChecked) => {
    const updated = [...prevChecked, value];
    console.log(updated);
    return updated;
});

无法从当前状态访问更新的状态。有关更多信息，请参阅

您可以做的是在状态变量更新时触发效果，并在其中打印更新的数组：

React.useEffect(() => {
  console.log("checkBoxArrray:" + checkboxChecked);
}, [checkboxChecked]);

Nisanth Reddy提出的解决方案也有效


完整的工作示例：


函数选择todo（{todo}）{
const[checkboxChecked，setCheckboxChecked]=React.useState（[]）；
常量handleInputChange=（e）=>{
const checked=e.target.checked；
设值=e.target.value；
如果（选中）{
setCheckboxChecked（（prevChecked）=>[…prevChecked，值]；
}否则{
控制台日志（“未选中”）；
}
};
React.useffect（（）=>{
日志（“checkboxarray:+checkboxChecked”）；
}，[checkboxChecked]）；
返回(
{todo}
);
}
render（，document.getElementById（“根”））

您能提供一个
代码沙盒
或类似的代码链接吗？Nisanth Reddy，谢谢您的反馈！注意。