Reactjs 计数器为'；当使用useState钩子时，t增加

我有以下代码：

  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>
  );
}

const[count1，setCount1]=useState（0）；
const handleAsyncUpdate=async（）=>{
设置计数1（计数1+2）；
设置计数1（计数1+1）；
};
const handleSyncUpdate=（）=>{
设置计数1（计数1+2）；
设置计数1（计数1+1）；
};
console.log（“渲染”，count1）；
返回(
{count1}
单击此处进行异步更新
单击以获取同步更新
);
}

当我单击第二个按钮时，我希望

{count1}

呈现

3

（0+1+2），但它呈现

1

---

如果我切换

setCount1（count1+1）到
setCount1（计数=>count+1）
那么它可以正常工作，但是为什么呢？
我认为您对
useState
的工作方式感到困惑（如果您使用类，甚至是
this.setState
）。这些操作始终是异步的，React根据它认为优先级与否来安排这些更改

将
async
放在函数上，并不是说它突然异步了，而是说它返回了一个
承诺

就React的工作方式而言，这不会改变任何事情。因此，您的
handleSyncUpdate
和
handleSyncUpdate
对于React基本相同，它们都触发异步操作（更改状态）

setCount1（count=>count+1）
-使用此选项，您实际上是在使用最后一个状态值进行更新，从而保证新值将是最后一个状态值+1

setCount1（count1+1）
-在这种情况下，您使用的值是在调用此
setState
和React执行更新之间由另一个
setState
变异的值

我希望这有助于
setState
调用async，在您的情况下，您在
setCount1（count1+2）
和
setCount1（count1+1）之间存在竞争条件排除以前的状态。如果切换到
setCount1（count=>count+1）你开始考虑前面的状态值。好吧，我想我明白了！所以在我的例子中，我打了两个电话：
setCount1（count1+1）
和
setCount1（count1+2）
。但由于它们是异步执行的，因此就每个调用而言，
count1
的值是
0
？（因为他们彼此不认识）就我的理解而言，是的！当调用两个
setState
时，
count1
为
0
。