javascript - 不同的子组件同时调用 setState 会弄乱父组件的状态

Question

我正在创建一个基于间隔的游戏。父组件创建一个间隔并让其子组件注册每个间隔触发的回调。

我的设置如下

<ParentComponent>
  <Child1 />
  <Child2 />
  ...
</ParentComponent>

父级使用 React.cloneElement并为每个 child 提供一个方法

registerCallback( callback, id ) {
  const { callbacks } = this.state;
    this.setState({
      callbacks: callbacks.concat({
        callback,
        id
      })
    })
  }

这个方法效果很好。但现在我有两个 child 调用registerCallback()内部方法componentDidMount() .

现在仅限<Child2 />将其回调存储在父状态中。

当我延迟调用 registerCallback() 时方法如

setTimeout(() => {
  registerCallback(callbackFunction, id)
}, 50 )

效果很好。但这感觉像是一个非常错误的黑客行为，特别是因为我需要“猜测”状态需要更新多长时间。

所以我的结论是状态更新太慢了，而是在我的组件外部定义了一个数组并更新了它。奇怪的是，如果我改变这个数组，它就可以正常工作。

所以如果我使用 array.push({callback, id})我的数组看起来像 [callback1, callback2]

但是因为我不想改变我的数组，所以我尝试了 array.concat({callback, id})这给我留下了 []

虽然我的状态看起来像 [array2]

我如何改进家长的方法，让 children 可以调用 registerCallback()无论何时何地，没有任何问题。

Answer 1

正如您所正确推断的那样，问题在于 setState 是异步的，因此当第二个子级调用 registerCallback 时，第一个子级的状态更改尚未传播到 this.state。尝试:

registerCallback( 回调, id ) {
this.setState(({ 回调 }) => ({
回调:callbacks.concat({
打回来，
ID
})
})
}


您将函数作为第一个参数传递给 setState。该函数接收当前状态(上面解构为{callbacks})并应返回新状态。该函数将立即调用，或者在先前的状态更改传播时调用，因此保证其状态是最新的。因此，您可以避免使用可能过时的 this.state。

这是一篇关于它的文章:

https://medium.com/@wereHamster/beware-react-setstate-is-asynchronous-ce87ef1a9cf3