React中批量修改状态数组petName键且保留原状态的方法

针对你定义的多行表格数据状态，更新时需要严格遵循React 不可变更新规则，全程不改动原始状态的引用，正确实现如下：

实现代码 #

如果你需要把所有对象的petName键替换为自定义的新键名（例如pet/animalName等），可以直接用下面的更新逻辑：

setState(prevState => {
  return prevState.map(item => {
    // 拆分出需要改名的属性，其余属性原样保留
    const { petName, ...restProps } = item;
    return {
      ...restProps,
      // 这里把newPetKey替换成你实际需要的键名即可
      newPetKey: petName
    }
  })
})

逻辑说明 #

• 数组的map方法会返回全新的数组实例，不会修改原始state数组
• 处理单条数据时，通过解构+剩余运算符分离出petName，再和新键值对组装为全新对象，不会修改原数组里的对象引用
• 采用函数式更新的写法传入setState，可以保证始终拿到最新的前序状态，避免闭包残留导致的更新错误

效果参考 #

如果把新键名设为pet，更新完成后的状态结构为：

[
  { firstName: "example", lastName: "example", pet: "example" },
  { firstName: "example", lastName: "example", pet: "example" },
  { firstName: "example", lastName: "example", pet: "example" },
]

错误写法避坑 #

以下写法会直接修改原始状态，引发React重渲染异常、状态污染等问题，禁止使用：

• 直接遍历原state数组，给数组项增删属性
• 直接通过索引修改state项的属性，例如state[0].pet = 'test'
• 调用会修改原数组的方法（push/splice/pop等）直接操作state变量

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