用数组反应 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
  ));
};