React中修改对象数组state时所有对象同步更新问题如何解决

• 核心问题出在Array.fill()对引用类型的处理逻辑：当你传入对象eduObj作为填充值时，生成的数组所有元素存储的都是同一个对象的内存引用，而非独立的新对象。此时修改任意一个数组元素的属性，本质都是修改内存中唯一的eduObj实例，自然所有元素都会同步更新。
• 其次你在onChangeEdu中做的[...highestEducation]属于数组浅拷贝，仅创建了新数组，数组内部的对象引用仍和原数组完全一致，没有解决对象共享引用的问题。

1. 修正数组生成逻辑 #

不要直接用Array.fill()填充同一个对象，改为每次生成独立的对象拷贝，推荐用Array.from实现：

useEffect(() => {
  // 定义长度映射表简化判断逻辑
  const eduLengthMap = {
    highSchool: 1,
    intermediate: 2,
    graduation: 3,
    postGraduation: 4
  }
  const targetLength = eduLengthMap[edu] || 1
  // 每次回调都返回新的eduObj浅拷贝，保证所有元素独立
  const filled = Array.from({length: targetLength}, () => ({...eduObj}))
  setHighestEducation(filled)
}, [edu])

2. 优化属性更新逻辑 #

修改数组元素属性时，要对目标对象做拷贝再修改，避免直接修改原引用，同时推荐使用函数式更新保证拿到最新的state：

const onChangeEdu = (e, id) => {
  setHighestEducation(prevState => {
    return prevState.map((eduItem, index) => {
      // 仅修改对应索引的对象，其余对象直接返回复用
      if (index === id) {
        return {...eduItem, [e.target.name]: e.target.value}
      }
      return eduItem
    })
  })
}

内容的提问来源于stack exchange，提问作者Nitesh Jha