为什么在React中使用两个setState计数值增加1而不是2

Question

下面是不能工作的代码:

import { useState } from "react";
const Counter = () => {
const [count,setCount]= useState(0);
const buttonHandler = ()=>{
setCount(count+1);
setCount(count+1);
}

return (
<div >
{count}
<button onClick={buttonHandler}>+</button>
</div>

);

}

我真的不明白React的底层到底发生了什么。我从一些视频中看到，如果我这样做，它会起作用:

const buttonHandler = ()=>{
setCount(prevCount => prevCount+1);
setCount(prevCount => prevCount+1);
}

但是我不觉得我真的明白为什么第一个不工作

Answer 1

在你的函数中，buttonHandler, setCount不会立即改变count的值。它只是更新用于设置计数的状态下一次计数器被渲染。

因此，如果count为0，两次调用值为count + 1的setCount实际上会导致两次调用值为1的setCount。