React中更新嵌套对象数组状态的写法是否正确？

你的写法不符合React不可变状态更新的规范，存在隐性运行风险：

• Item组件内对单条item的浅拷贝逻辑是正确的：item本身是单层普通对象，用展开运算符做浅拷贝后修改属性，不会污染原item对象。
• 问题出在App组件的状态更新逻辑：你只对最外层数组做了浅拷贝（[...sourceList]），内层的各个分组数组仍然直接引用原状态中的数组对象，直接执行elements[idx] = newItem本质是直接修改原状态的内层引用，违反了React状态不可变的核心要求。
• 这种写法在简单场景下可能暂时能正常渲染，但会引发一系列隐性问题：React状态变更检测失效导致组件不重渲染、useMemo/useEffect等钩子的依赖比对出错、React DevTools无法正确追踪状态变更链路等。

核心原则：更新嵌套状态时，必须拷贝所有你要修改的层级的父级容器，未涉及修改的层级可以保留原引用，兼顾不可变要求和渲染性能。

原生JS无依赖实现 #

不需要引入额外工具，用数组的map方法做逐层映射即可，比嵌套forEach的写法更简洁安全：

function updateItem(newItem){
  setItems((sourceList) => {
    // 外层数组遍历，仅对包含目标项的内层分组做拷贝，其余分组保留原引用
    return sourceList.map(elements => {
      // 先判断当前分组是否包含目标项，不包含直接返回原数组，减少不必要拷贝
      if (!elements.some(item => item.id === newItem.id)) {
        return elements
      }
      // 拷贝内层分组数组，替换匹配到的目标项
      return elements.map(item => item.id === newItem.id ? newItem : item)
    })
  })
}

这个实现的优势：

• 所有被修改的数组层级都生成了新引用，完全符合不可变要求
• 未修改的分组保留原引用，不会引发无关组件的重渲染
• 不需要手动维护数组索引，逻辑更清晰，不容易写出越界类bug
• 用严格相等===做id比对，避免==带来的隐式类型转换误匹配问题，找到目标项后不需要冗余遍历，性能更好

复杂嵌套场景的简化方案 #

如果后续状态嵌套层级更深（比如三维、四维数组，或者数组里套复杂对象），手动逐层写map拷贝很容易漏写某一层，推荐用Immer来简化更新逻辑，这也是React官方推荐的复杂状态更新方案：

import { produce } from 'immer'

function updateItem(newItem){
  setItems(
    produce(draft => {
      // 直接在草稿上"修改"值即可，Immer会自动生成符合不可变要求的新状态
      for (const elements of draft) {
        const targetIndex = elements.findIndex(item => item.id === newItem.id)
        if (targetIndex !== -1) {
          elements[targetIndex] = newItem
          break
        }
      }
    })
  )
}

这种写法不需要手动处理逐层拷贝的逻辑，哪怕后续状态结构变更加了更多嵌套层级，也只需要找到目标位置直接赋值即可，代码可读性和可维护性更高。

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