这段代码是我修改数据的地方，其中我将“checked”更新为“true”或“false”。这段代码之所以有效是因为当我console.log（）它更新了状态。
setRolesData((prevState) => {
const newState = Array.from(prevState);
newState[targetCb]["checked"] = e.target.checked;
return newState;
});
console.log(rolesData);结果图片：
这段代码是我循环遍历更新的数据的地方，但问题是如果第二次尝试，它返回的数据与日志数据相同。
// get all checked roles
const roleArr: any = [];
rolesData.map((item, index) => {
console.log(item.checked + " ^ " + item.name);
});结果图片：
3条答案
按热度按时间jgzswidk1#
所以问题是状态没有立即更新。我将循环转移到处理表单提交的方法中。
pkwftd7m2#
在React中，组件有一个基于保持状态的生命周期。当你更新一个组件中的值时，我们有效地触发了组件的重新渲染。因此，如果你在组件的顶部有一个具有特定值的变量，并试图在函数中更新这个值，你会发现这个值被重置了。React正在替换包含JavaScript变量的组件。
为了保留所有变量，我们使用useState来在重新呈现之间持久化组件的状态。但是，在函数中，使用useState不会立即将值保存到state。useState是一条发送给React的指令，告诉它当组件重新呈现时，我们需要保存该值。如果您尝试在重新渲染开始之前访问状态中的值，则将使用“先前”值。在这种情况下，组件将在调用函数完成之前不会重新呈现。
那么，如何倾听变化呢？
UseEffect是一个特殊的钩子，它将依赖项数组作为“侦听器”。当我们使用useEffect并在state中给予它一个值作为依赖项时，它告诉它如果该值发生变化，就在useEffect中运行代码。
每当myState被更改时，包括组件初始化时，都会运行这段代码。因此，我们可以使用useEffect来处理需要新更新的有状态值的逻辑。
goucqfw63#
UseState是异步的。因此，它不会像预期的那样在循环中工作。更好的方法是使用一些全局变量，然后根据它更新状态。