如何递归处理无限层级树数组，修改指定ID文件夹及其子项的权限属性

原有代码的核心问题 #

• 入参类型不匹配：调用时传入的folderData是根层级的文件夹数组，不是单个文件夹对象，原有findFolder直接读取folders.folderId、folders.children对数组无效，根ID能匹配属于逻辑巧合
• 递归传参错误：遍历子节点调用findFolder时，第二个参数错误传入当前子节点的folderId，而非传入顶层的目标id，导致深层匹配逻辑完全失效
• 递归结果无承接：遍历子节点调用findFolder时，没有接收返回的结果，深层匹配到目标后，结果无法回溯到顶层调用，因此返回null
• 节点修改后没有回写原树：原有逻辑匹配到目标后只返回修改后的当前节点子树，没有替换原树中的对应节点，无法保留完整的上层树结构

修正后实现（Immutable版本，不修改原数据） #

保留你原有changeChildrenPermission的不可变写法，调整递归逻辑如下：

const changeChildrenPermission = (folder) =>
  folder.map(({ folderId, children, ...rest }) => ({
    folderId,
    ...rest,
    isSettingPermission: true,
    children: changeChildrenPermission(children),
  }));

export const findFolder = (folders, id) => {
  // 遍历当前层级所有文件夹
  return folders.map(folder => {
    // 当前节点匹配目标ID，直接修改自身和所有子级
    if (folder.folderId === id) {
      return changeChildrenPermission([folder])[0];
    }
    // 不匹配则递归处理子节点
    if (folder.children?.length) {
      return {
        ...folder,
        children: findFolder(folder.children, id)
      }
    }
    // 无子节点也不匹配，直接返回原节点
    return folder;
  })
};

调用示例 #

// 传根ID
const result1 = findFolder(folderData, '1');
// 传深层ID，返回修改后的完整树
const result2 = findFolder(folderData, '2.1'); 

可选：原地修改版本（直接修改原数组对象，性能更高） #

如果可以接受修改原数据，可简化为以下实现：

const setPermissionRecursive = (folder) => {
  folder.isSettingPermission = true;
  folder.children.forEach(child => setPermissionRecursive(child));
}

export const findFolderAndUpdate = (folders, id) => {
  for (const folder of folders) {
    if (folder.folderId === id) {
      setPermissionRecursive(folder);
      return true;
    }
    if (folder.children?.length) {
      const found = findFolderAndUpdate(folder.children, id);
      if (found) return true;
    }
  }
  return false;
}

// 调用，直接修改原folderData
findFolderAndUpdate(folderData, '2.1');

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