React组件在与钩子一起使用时选择旧状态

Question

我仍然在React中获得钩子的悬挂。我正在制作一款井字游戏，以理解useState钩的概念。一切都很好，但我需要再走一步才能找到赢家。这是因为我在每次用户移动时都调用一个函数，而该函数无法获得更新状态，它总是拥有游戏的旧一步状态。

这里是CodeSandbox的链接。以下是流程的工作原理:

• 第一次渲染:Game函数调用->Board函数->板子采用定制挂钩，useBoardState->useBoardState在状态中初始化一个大小为9的空数组，并返回数组和updateSquares函数来更新状态(还有一些其他的东西来渲染UI，但与问题无关)。
• 当用户点击空框时:selectSquare函数被调用->selectSquare调用updateSquares更新状态(+一些其他的东西，使游戏可用)

观察selectSquare函数中的控制台即使在执行updateSquares时也处于stale状态。我期待状态会被更新函数被调用

根据注释中的要求，我在这里添加了相关的代码部分:

function useBoardState() {
const [squares, setSquares] = useState(() => Array(9).fill(null));
function updateSquares(index, mark) {
setSquares((prevSquares) => {
const newSquares = [...prevSquares];
newSquares[index] = mark;
return newSquares;
});
}
return [squares, updateSquares];
}

我认为这与这个自定义钩子有关，我认为updateSquares状态调度程序在渲染完成时更新状态。

不知道我在这里错过了什么。

Answer 1

从useState返回的setter以及相应的基于类的组件setState不被同步调用。这就是为什么如果你输入

const updateSomething = () => {
setFoo(1)
setBar(2)
setFooBar(3)
console.log('hey')
}

React将在开始设置状态之前记录hey，此外，它实际上会将setFoo,setBar和setFooBar批处理在一起，因此它会对上述所有状态更新进行一次渲染。