如何更新React state中作为属性的数组的指定索引元素

首先明确：你现在采用的「构建新数组替换旧数组」的核心思路本身就是React官方要求的正确实现方向，并不是笨办法——只是可以通过更简洁的语法减少冗余代码，避免无意义的全量拷贝。

核心规则前提 #

React 对 state 的更新判断基于浅比较：如果你直接修改原 state 数组的指定索引（比如 state.yourArr[N] = newVal），数组本身的内存引用没有变化，React 会判定状态未变更，不会触发重渲染，甚至会污染其他依赖该状态的逻辑。
所有数组更新的本质都是生成一个引用全新的数组，除了目标修改的位置，其余元素和原数组保持共享引用即可，不需要做无意义的深拷贝。

具体实现写法 #

• 通用兼容写法（所有环境可直接运行，无语法依赖）：
  通过数组slice拆分拼接生成新数组，全程不修改原数组：

// 假设state的目标数组属性名为list，要修改的索引为N，新值为newVal
setState(prev => ({
  ...prev,
  list: [
    ...prev.list.slice(0, N), // 截取索引N之前的所有元素（不包含N）
    newVal, // 放入我们要修改的新值
    ...prev.list.slice(N + 1) // 截取索引N之后的所有元素（从N+1开始到末尾）
  ]
}))

• 现代JS简洁写法（支持ES2023及以上的环境可直接使用）：
  用 Array.prototype.with() 方法，该方法专门用于「不修改原数组的前提下，替换指定索引的元素并返回全新数组」，可读性远高于手动slice拼接：

setState(prev => ({
  ...prev,
  list: prev.list.with(N, newVal)
}))

嵌套元素的更新场景 #

如果第N个位置的元素本身是对象，你需要修改对象内部的属性而非替换整个元素，继续保持不可变规则即可：

setState(prev => ({
  ...prev,
  list: prev.list.with(N, oldItem => ({
    ...oldItem,
    targetProp: newPropValue
  }))
}))

常见踩坑提醒 #

• 禁止直接修改原数组索引：哪怕你之后把原数组塞回setState也没用，因为引用没变，React感知不到更新。
• 没必要做全量深拷贝：比如用JSON.parse(JSON.stringify(list))的方式生成新数组，会带来不必要的性能损耗，上述写法生成的新数组，除了第N个位置的元素，其余元素都和原数组共享引用，完全满足React的更新判断要求，性能开销极低。

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