React使用useState钩子无需深拷贝修改对象数组的最优方案

错误原因 #

你原有写法出现多余条目的核心原因是：赋值表达式get_post[0].content = "This is index zero"的返回值为赋值的内容本身（也就是字符串This is index zero），你将它放在展开数组的后方，相当于直接往新数组末尾追加了这个字符串，因此产生了多余条目。同时直接修改原状态数组内部的对象属性属于状态突变，不符合React不可变更新规范，可能出现视图不更新的异常。

符合要求的最优写法 #

完全满足你提出的所有约束条件，无额外循环、无深拷贝、无第三方依赖、无需键控对象：

<button onClick={() => {
  // 仅浅拷贝数组本身，不遍历内部元素，性能开销可忽略
  const newPostArr = [...get_post]
  // 仅浅拷贝目标索引的对象，修改属性后替换，无全量遍历操作
  newPostArr[0] = {...newPostArr[0], content: "This is index zero"}
  set_post(newPostArr)
}}> Manipulate! </button>

渲染循环中的适配写法 #

你在渲染map循环中使用时，直接替换索引值即可：

const [get_post, set_post] = useState([
  {name: "First"},
  {name: "Second"},
  {name: "Third"},
])

// 渲染模块
get_post.map((post, index)=> (
  <>
    <button onClick={() => {
      const newPostArr = [...get_post]
      newPostArr[index] = {...newPostArr[index], content: "Content 1"}
      set_post(newPostArr)
    }}> 
      Controller 1
    </button>
    <button onClick={() => {
      const newPostArr = [...get_post]
      newPostArr[index] = {...newPostArr[index], content: "Content 2"}
      set_post(newPostArr)
    }}> 
      Controller 2
    </button>
    <button onClick={() => {
      const newPostArr = [...get_post]
      newPostArr[index] = {...newPostArr[index], content: "Content 3"}
      set_post(newPostArr)
    }}> 
      Controller 3
    </button>
  </>
))

方案优势说明 #

• 无深拷贝：仅做数组层和目标对象层两次浅拷贝，没有全量递归拷贝的性能损耗
• 无额外依赖：纯原生JavaScript语法实现
• 无全量循环：全程没有遍历整个数组的map/filter操作，仅操作目标索引的单个元素
• 符合React不可变更新规范：不会突变原状态，视图更新逻辑稳定

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