用數組反應 useState 鈎子競爭條件

Question

所以我的組件被設置為一個可以有 x 個子組件的容器，在每個子組件根據各種條件“准備好”之前，用戶無法繼續前進。 我遇到了一個問題，其中一些設置為在初始渲染時准備就緒，無需滿足任何條件。 如果其中 2 個在同一個容器中，它們每個都用 say [false, false] 獲取相同的數組，然后一組 [true, false] 和另一個 [false, true] 然后 [false, true] 是設置的在 state 中。 我認為這是異步設置 state 的結果，因此它在兩個調用中都獲取了舊的 state 值。 我怎樣才能解決這個問題？

  const [readyArray, setReadyArray] = useState(
    new Array(children.length).fill(false)
  );

  const setReady = (val, idx) => {
    let newArray = Array.from(readyArray);
    newArray[idx] = val;
    if (isArrayTrue(newArray)) {
        props.setReady(true);
     }
    setReadyArray(newArray);
  };

編輯： function 還檢查整個數組是否為真，並調用另一個 function 讓 HOC 知道每個孩子都准備好了。

Answer 1

讓setReadyArray在閉包中使用回調而不是使用readyArray - 這樣，立即 state 更新不會相互覆蓋：

const setReady = (val, idx) => {
  setReadyArray(readyArray => readyArray.map(
    (orig, i) => i === idx ? orig : val
  ));
};