useState 连续调用 setState 导致值丢失

解决 React useState 中连续调用 setState 时状态更新丢失的问题

问题

使用 useState 时，连续调用 setTest({...test, newValue}) 会出现值的丢失。

const [test, setTest] = useState([]);

// 连续调用会导致值丢失
setTest({...test, newValue1});
setTest({...test, newValue2});

useState 的状态更新是异步的，执行 setTest 后不会立即更新 test 的值。连续多次调用时，每次都基于同一个旧的 test 值进行展开，导致后面的更新覆盖前面的更新。

正确的做法是使用函数式更新，传入一个函数给 setState，函数参数是最新的状态值：

const [test, setTest] = useState([]);

// 使用函数式更新
setTest(prevState => ([
  ...prevState,
  newValue
]));

这样每次更新都能获取到上一次更新后的最新状态，避免值被覆盖。