React中如何访问并更新嵌套对象数组：修改folder5的child属性

要修改这种嵌套层级的状态，核心是遵循React的不可变更新原则——绝对不能直接修改原状态对象，必须创建整个嵌套结构的副本，只对目标节点进行修改。这里给你两种实用的实现方式：

方法一：递归更新（通用型，适配任意嵌套深度） #

这种方法最灵活，不管你的文件夹嵌套多少层都能生效，推荐日常使用：

// 定义一个递归函数，用来遍历并更新目标文件夹
const updateTargetFolderChild = (folders, targetId, newChild) => {
  return folders.map(folder => {
    // 找到目标文件夹，返回副本并替换child属性
    if (folder.id === targetId) {
      return { ...folder, child: newChild };
    }
    // 如果当前文件夹有子文件夹（且子项是数组，兼容原数据里的空字符串child），递归更新子项
    if (Array.isArray(folder.child)) {
      return { ...folder, child: updateTargetFolderChild(folder.child, targetId, newChild) };
    }
    // 既不是目标，也没有可递归的子项，返回原对象的副本
    return { ...folder };
  });
};

// 调用setFolders更新状态，比如把folder5（id=9）的child改成新的子文件夹数组
setFolders(prevFolders => updateTargetFolderChild(prevFolders, 9, [
  { title: "new-subfolder-1", id: 12, child: "" },
  { title: "new-subfolder-2", id: 13, child: "" }
]));

代码说明： #

• 递归函数会逐层遍历所有文件夹和子文件夹，找到id=9的folder5后，创建它的副本并替换child属性。
• 所有非目标节点都会生成副本，保证原状态不被直接修改，React能正确检测到状态变化并触发重渲染。
• 特意处理了原数据中child为空字符串的情况，避免对非数组调用map导致报错。

方法二：手动逐层复制（适合固定层级场景） #

如果你明确知道folder5的嵌套路径（folder2 -> folder4 -> folder5），也可以手动逐层复制更新，但这种方法不够灵活，层级变化后代码需要同步修改：

setFolders(prevFolders => {
  return prevFolders.map(topFolder => {
    // 找到第一层的folder2（id=1）
    if (topFolder.id === 1) {
      return {
        ...topFolder,
        child: topFolder.child.map(secondFolder => {
          // 找到第二层的folder4（id=4）
          if (secondFolder.id === 4) {
            return {
              ...secondFolder,
              child: secondFolder.child.map(thirdFolder => {
                // 找到第三层的folder5（id=9），替换它的child
                if (thirdFolder.id === 9) {
                  return { ...thirdFolder, child: "你想要设置的新child内容" };
                }
                return { ...thirdFolder };
              })
            };
          }
          return { ...secondFolder };
        })
      };
    }
    return { ...topFolder };
  });
});

关键注意点： #

1. 必须使用函数式更新（setFolders(prev => ...)），确保基于最新的状态值进行修改。
2. 所有数组和对象都要通过扩展运算符...或map创建副本，不能直接修改原状态。

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