处理功能组件中的过时状态

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

在上面的示例中，如果您单击 'increase'，然后单击 'decrease'..您将以 -1 结束（我希望它是 0）。如果这是一个 React class 而不是功能组件，我认为解决方案是在函数上使用 bind(this)，但我没想到这会成为箭头函数的问题。

Answer 1

因为使用了setTimeout

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

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

所以每个 increment() 都会调用 setCount(0 + 1);。

所以不管你一秒钟调用多少次，count总是1。

Answer 2

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

处理功能组件中的过时状态

Handling out of date state in functional components

reactjs

react-16