reactjs - 处理功能组件中的过期状态

Question

我在设置从异步函数中使用“useState”钩子创建的状态时遇到问题。

我创建了一个代码笔来演示：https ://codepen.io/james-ohalloran/pen/ZdNwWQ

const Counter = () => {
  const [count, setCount] = useState(0);

  const increase = () => {
    setTimeout(() => {
      setCount(count + 1);
    },1000);
  }

  const decrease = () => {
    setTimeout(() => {
    setCount(count - 1);
    },1000)
  };
  return (
    <div className="wrapper">
      <button onClick={decrease}>-</button>
      <span className="count">{count}</span>
      <button onClick={increase}>+</button>
    </div>
  );
};

在上面的例子中，如果你点击“增加”，然后点击“减少”......你最终会得到 -1（我希望它是 0）。如果这是一个 React 类而不是函数组件，我会假设解决方案是bind(this)在函数上使用，但我没想到这会成为箭头函数的问题。

Answer 1

这是因为使用setTimeout

假设您increase()在一秒钟内调用了 10 次。

count将永远0。因为状态在一秒钟后更新，所以在一秒钟内的每个increment()调用都会有一个 unupdated count。

所以每个increment()人都会打电话setCount(0 + 1);。

因此，无论您在一秒钟内调用多少次，count总是1.

Answer 2

啊，我找到了解决办法。我没有意识到我能够从 useState setter 函数中引用 previousState：https ://reactjs.org/docs/hooks-reference.html#functional-updates