React useState 忘记考虑先前状态

import React, { useState } from 'react';

export const Counter = () => {
  const [counter, setCounter] = useState(0);

  const incrementCounter = () => {
    setCounter(counter + 1); // 可能不会按预期工作
  };

  return (
    <div>
      <p>Counter: {counter}</p>
      <button onClick={incrementCounter}>Increment</button>
    </div>
  )
};

在 React 中，当你调用 setCounter 来更新状态时，如果多个更新是在同一事件循环中进行的，React 可能会将这些状态更新进行批量处理。这可能会导致如下情况：

1. 基于旧状态更新：当你使用 setCounter(counter + 1) 或类似的方式进行更新时，React 可能会把多个更新合并，这样在计数器更新时，每次更新都基于同一个初始值 counter。这样，当你连续点击按钮多次时，所有的增量更新将基于组件挂载时的初始 counter 值进行，从而导致最终结果小于预期。

发生的情况：

• 如果用户迅速点击 “Increment” 按钮两次，incrementCounter 会被调用两次。
• setCounter(counter + 1) 在这两次调用中都基于同一个 counter 的初始值（例如 0），因此最终结果只会是 1 而不是 2。

2. 异步状态更新：React 的状态更新可能是异步的。这意味着调用 setCounter 后，状态可能不会立即更新。因此，后续的状态更新仍然基于旧的状态值。

发生的情况：

• 每次调用 incrementCounter，setCounter(counter + 1) 可能不会立即更新计数器。
• 当你在 setCounter 后直接打印 counter 的值时，输出的可能仍然是旧的 counter 值（例如 0），因为 React 更新状态是异步的。

使用回调解决问题

可以通过以下方式来解决上述两个问题：

const incrementCounter = () => {
  setCounter(prevCounter => prevCounter + 1); // 正确更新状态
};

通过使用 setCounter(prevCounter => prevCounter + 1)，无论用户点击多少次按钮，状态的更新都会基于最新的状态值，因此可以确保计数器能够正确地增加。