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突变的值。

我希望这会有所帮助

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

1 个答案: