我的React状态不会使用带有稍微复杂的对象的useState钩子更新。
在我的React应用程序中，我故意使用useState钩子将几个数组组合在一个状态下。这些数组表示我希望保持“托管”在一起的可视对象，以确保应用程序的重新呈现在视觉上是一致的。
在测试时，我试图更改第一个数组中某些对象的属性。updatedElements正确地反映了更新(由我的控制台日志清楚地显示)。但是，更新我的useState状态不起作用。数组elements一点也不改变。
以下是相关代码：
const updatedElements: VisualDiagramElementData[] =
visualData.elements.map((element: VisualDiagramElementData) =>
element.id === id
? { ...element, selected: true }
: { ...element, selected: false }
);
console.log(updatedElements);
setVisualData({
elements: updatedElements,
connectors: visualData.connections,
connections: visualData.connections,
});我错过了什么/做错了什么？任何帮助都是非常感谢的！
回答 3
Stack Overflow用户
发布于 2022-08-24 20:49:53
当根据状态属性的前一个值更新状态属性时，应该使用状态设置器的回调参数。否则，您可能使用陈旧的状态值。
https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous
https://reactjs.org/docs/hooks-reference.html#functional-updates
它应该是：
setVisualData((visualData)=>({
elements: visualData.elements.map(/*Your map callback*/),
connectors: visualData.connections,
connections: visualData.connections,
}));Stack Overflow用户
发布于 2022-08-24 21:00:47
我将使用React中推荐的内容--将它们拆分为多个状态变量：https://reactjs.org/docs/hooks-faq.html#should-i-use-one-or-many-state-variables。
根据触发方式的不同，状态更新将决定是否多次重新呈现。有关批处理如何工作的更多详细信息，请参见此答案：https://stackoverflow.com/a/53048903/6854709
还请注意aprillion的评论
github.com/facebook/react/issues/10231#issuecomment-316644950的
备注--这是实现细节，可能会在将来的版本中更改。
Stack Overflow用户
发布于 2022-08-24 21:54:06
最后，它通过使用“状态设置器的回调参数”来工作。我修改/审查了我的整个代码，并相应地修改了我的所有状态设置程序。现在，一切都像魅力一样运作。再次感谢您的帮助，特别是好书。
https://stackoverflow.com/questions/73481904
复制
相似问题
React useState钩子-更新对象的状态
使用useState钩子更新函数后，React不会更新状态
使用React中的useState钩子更新对象
React钩子useState不更新状态
如何使用useState钩子更新对象状态
领取专属 10元无门槛券
AI混元助手 在线答疑
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
