使用 useState 挂钩时计数器不会递增

Question

我有以下代码：

const [count1, setCount1] = useState(0);

const handleAsyncUpdate = async () => {
setCount1(count1 + 2);
setCount1(count1 + 1);
};
const handleSyncUpdate = () => {
setCount1(count1 + 2);
setCount1(count1 + 1);
};
console.log("render", count1);
return (
<div className="App">
<h2>{count1}</h2>
<button type="button" onClick={handleAsyncUpdate}>
Click for async update
</button>
<button type="button" onClick={handleSyncUpdate}>
Click for sync update
</button>
</div>
);
}

当我单击第二个按钮时，我希望<h2>{count1}</h2>呈现3(0 + 1 + 2(，但它呈现1。

如果我setCount1(count1 + 1);切换到setCount1(count => count + 1);那么它可以正常工作，但为什么呢？

Answer 1

我认为您对useState(如果您使用类，甚至this.setState(的工作方式感到困惑。这些操作始终是异步的，React 根据它认为的优先级来安排这些更改。

通过将async放在一个函数上，你并不是说它突然异步，而是说它返回一个Promise。

就 React 的工作方式而言，这不会改变任何东西。所以实际上你的handleSyncUpdate和handleAsyncUpdate对于 React 来说基本相同，它们都会触发异步操作(改变状态(。

setCount1(count => count + 1)- 使用它，您实际上是在使用最后一个状态值进行更新，从而保证新值将是最后一个 + 1。

setCount1(count1 + 1)- 在这种情况下，您正在使用的值在调用此setState的那一刻和 React 执行更新的那一刻之间被另一个setState突变。

我希望这有帮助