我有以下代码:
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);
,那么它可以正常工作,但是为什么呢?
发布于 2020-06-19 15:03:04
我认为您对useState
(或者如果您使用类,甚至是this.setState
)的工作方式感到困惑。这些操作总是异步的,React根据它认为的优先级或非优先级来安排这些更改。
通过将async
放在一个函数上,您并不是说它突然就是异步的,而是说它返回一个Promise
。
就React的工作方式而言,这不会改变任何事情。所以实际上你的handleSyncUpdate
和handleAsyncUpdate
对于React来说基本上是一样的,它们都触发了异步操作(改变状态)。
setCount1(count => count + 1)
-使用此方法,您实际上是在使用最后一个状态值进行更新,从而保证新值将是最后一个值+ 1。
setCount1(count1 + 1)
-在这种情况下,您使用的值在此setState
被调用的时刻和React执行更新的时刻之间被另一个setState
改变。
我希望这能帮到你
https://stackoverflow.com/questions/62472783
复制相似问题