不同的子組件通過同時調用setState弄亂了父狀態

Question

我正在基於間隔創建游戲。 父組件創建一個間隔，並使其子組件注冊每個間隔觸發的回調。

我的設置看起來像

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

父級使用React.cloneElement並為每個子級提供一個方法

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

這種方法效果很好。 但是現在我有兩個孩子從componentDidMount()內調用registerCallback()方法。

現在，只有<Child2 />將其回調存儲在父狀態中。

當我延遲調用registerCallback()方法時，例如

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

工作正常。 但這感覺是一個非常錯誤的破解，尤其是因為我需要“猜測”狀態需要更新多長時間。

所以我的結論是，狀態更新太慢了，而是在組件外部定義了一個數組，並對其進行了更新。 奇怪的是，如果我對該數組進行了變異，它就可以正常工作。

因此，如果我使用array.push({callback, id})我的數組看起來像[callback1, callback2]

但是由於我不想改變數組，所以我嘗試了array.concat({callback, id})這給我留下了[]

雖然我的狀態看起來像[array2]

我如何在父級中改進我的方法，以使子級可以隨時隨地調用registerCallback() ，而不會出現任何問題。

Answer 1

正如您已正確推論的那樣，問題是setState是異步的，因此在第二個子對象調用registerCallback時，第一個子對象的狀態更改尚未傳播到this.state。 嘗試：

registerCallback( callback, id ) { this.setState(({ callbacks }) => ({ callbacks: callbacks.concat({ callback, id }) }) }

您將一個函數作為第一個參數傳遞給setState。 此函數接收當前狀態（以上已分解為{ callbacks } ），並應返回新狀態。 該函數將立即或在先前的狀態更改傳播后被調用，因此可以確保其狀態是最新的。 因此，避免使用可能過時的this.state 。

這是一篇關於它的文章：

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