React中如何更新LocalStorage对象中的多个状态？

问题出在你更新jobExperience时误用了push方法——push会修改原数组，并且返回的是数组的新长度（数字），而非新数组。当你同时更新两个字段时，jobExperience会被赋值成这个数字，后续操作自然会导致数组元素异常。

正确的做法是通过不可变的方式生成新数组，同时更新两个字段：

// 函数式更新的正确写法
setData(prev => ({
  ...prev, // 展开原状态的其他字段
  jobExperience: [...prev.jobExperience, {}], // 用扩展运算符生成新数组，添加空对象
  currentEditedJob: prev.currentEditedJob + 1
}))

或者用concat方法（同样返回新数组，不修改原数组）：

setData(prev => ({
  ...prev,
  jobExperience: prev.jobExperience.concat({}),
  currentEditedJob: prev.currentEditedJob + 1
}))

核心要点：

• 永远不要直接修改useLocalStorage返回的原状态对象/数组，必须返回全新的引用
• 数组更新时，优先用扩展运算符[...arr, newItem]或concat，避免用push/pop这类会修改原数组的方法

内容的提问来源于stack exchange，提问作者Ajayi Michael