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

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

关键点

• setState 是异步执行的，不会立即更新状态值
• 连续调用时，如果直接使用当前状态值会导致更新丢失
• 使用函数式更新 setState(prevState => newState) 可以获取最新状态
• 函数参数 prevState 始终是上一次更新后的最新值