时间戳

首页 > 解决方案 > 如何在不覆盖的情况下以比 setState 快数倍的速度更新状态数组？

reactjs - 如何在不覆盖的情况下以比 setState 快数倍的速度更新状态数组？

问题描述

我的问题很简单。

我有一个使用 useState 创建的数组

const [childFound, setChildFound] = React.useState([])

该数组包含表中每一行的布尔值，每个孩子在需要更改时都会调用更新。但是，如果我直接更改数组中的条目（如在 childFound[1] = false 中），则组件不会更新，因为没有调用 setter。

但是，如果我使用 childFound 的修改副本调用 setChildFound，该组件似乎要等待一段时间才能设置状态，因此有几个孩子在两者之间调用它。这意味着他们每个人都会复制原始 childFound ，修改他们的布尔值并设置它。这覆盖了前一个的 setChildFound，只有最后一个调用者真正改变了数组

有解决方法还是我应该完全不同地进行？

标签： reactjs

解决方案

你应该像这样更新它

setChildFound( prevState => {
  let newState = [...prevState]
  newState[1] = false
  return newState
 }
)

这样所有的调用者都会更新状态。参考：https ://reactjs.org/docs/hooks-reference.html#functional-updates

发生这种情况是因为 react 优化了状态更新，所以在一个 functin 中多次设置状态只会导致一次重新渲染。通过功能更新，您始终可以访问最后的真实状态值。

推荐阅读