React中如何为嵌套对象数组结构的state执行setState更新

要实现你这种多层嵌套state的更新，核心是遵循不可变更新原则：只给需要修改的层级生成新的引用，不需要改动的层级直接复用原有对象即可，以下是具体实现示例。

我们以「向id为1的home work看板下，id为2的In Progress分组的list数组添加新任务」为例，代码如下：

// 待添加的新任务
const newTask = {
  id: 2,
  taskTitle: "完成前端开发任务"
};

setBoardlist(prev => {
  // 遍历最外层看板列表
  return prev.map(board => {
    // 匹配到需要修改的目标看板
    if (board.id === 1) {
      return {
        ...board, // 复制看板原有属性
        data: board.data.map(group => {
          // 匹配到要添加任务的目标分组
          if (group.id === 2) {
            return {
              ...group, // 复制分组原有属性
              list: [...group.list, newTask] // 复制原有list，追加新任务
            }
          }
          // 非目标分组直接返回原对象
          return group;
        })
      }
    }
    // 非目标看板直接返回原对象
    return board;
  })
})

逻辑说明 #

• 用map方法遍历对应层级，只修改匹配到的目标对象，其余对象直接复用原有引用，兼顾正确性和性能
• 所有需要修改的对象/数组都用展开运算符...生成新的引用，避免直接修改原state导致React无法触发重渲染
• 若后续你的项目嵌套层级更多，也可以引入immer这类工具库简化不可变更新的写法，不用手写多层展开逻辑。

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