javascript - 为什么 React 状态没有正确更新？

Question

我正在制作一个数学游戏，我希望在回答一定数量的问题后更新操作数的范围。我有这段代码来设置难度

  const [difficulty, setDiff] = useState({rangeA:[1, 10], rangeB:[1, 10]});
  
  function setDifficulty(op) {
    let rangeA = [];
    let rangeB = [];
    if (question < 5) { //question state is incremented everytime the answer is correct, which triggers the next question
      rangeA = [0, 100];
      rangeB = [0, 10];
    }
    else if (question < 8) {
      rangeA = [0, 100];
      rangeB = [0, 100];
    }
    setDiff({...difficulty, rangeA, rangeB});
    console.log(rangeB, difficulty.rangeB); // when question is 5, this logs [0, 100] [0, 10], but they should be the same value [0,100]
  }

但是状态没有正确更新，可能会发生什么？

Answer 1

在 React 中设置状态就像一个异步函数。
这意味着当您设置状态并在其后面放置 console.log 时，它可能会在状态实际完成更新之前运行。

这就是为什么我们有 useEffect，这是一个内置的 React 钩子(Hook)，当它的依赖项之一发生更改时，它会激活回调。

示例:

useEffect(() => {
   console.log(difficulty)
   // Whatever else we want to do after the state has been updated.
}, [difficulty])

此 console.log 仅在状态完成更改并发生渲染后运行。

• 注意:示例中的“难度”可以与您正在处理的任何其他状态部分互换。

检查documentation了解更多信息。