如何更新React State中嵌套对象数组的指定属性值

React状态更新遵循不可变原则，所有修改都必须返回全新的引用，不能直接修改原状态对象，你之前操作报错/不生效的核心原因就是没有对嵌套层级做全量浅拷贝

实现代码 #

针对你的数组嵌套对象的数据结构，修改指定id对应属性的写法如下：

// 封装更新方法，入参为目标id、要修改的属性名、新属性值
const updateItemAttr = (targetId, attrKey, newValue) => {
  setData(prev => {
    return prev.map(outerItem => {
      // 匹配到包含目标id的外层对象
      if (Object.hasOwn(outerItem, targetId)) {
        // 逐层拷贝后修改属性
        return {
          ...outerItem,
          [targetId]: {
            ...outerItem[targetId],
            [attrKey]: newValue
          }
        }
      }
      // 未匹配的项直接返回，无性能损耗
      return outerItem
    })
  })
}

// 调用示例1：修改randomid1对应的name值
updateItemAttr('randomid1', 'name', '修改后的新名称')
// 调用示例2：修改randomid2对应的latinName值
updateItemAttr('randomid2', 'latinName', '修改后的拉丁名')

注意事项 #

• 不要直接修改原状态：禁止使用prev[index][targetId].name = newValue这种直接赋值的写法，会导致React无法检测到状态变更，甚至触发报错
• 不需要全量拷贝所有层级：未匹配到目标id的外层对象可以直接返回，不需要额外做展开操作，不影响不可变性同时能提升性能
• 兼容性说明：如果你的运行环境不支持Object.hasOwn，可以替换为Object.prototype.hasOwnProperty.call(outerItem, targetId)

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