如何基于两个数组递归生成适配Material UI Treeview的层级JSON结构

你原有代码存在三个问题：

• 遍历数组时错误读取mainArray.Id，实际应该读取当前遍历到的单个节点的Id
• 错误将完整的directories数组赋值给了SubDirectories，而非过滤后的子目录数组
• 未对子节点做递归处理，只能生成一级嵌套

基础递归实现（适合小数据量） #

export const createTreeData = (nodes, directories) => {
  return nodes.map(node => {
    // 筛选当前节点对应的子目录
    const childDirs = directories.filter(dir => dir.ParentId === node.Id)
    // 递归挂载子目录
    return {
      ...node,
      SubDirectories: childDirs.length ? createTreeData(childDirs, directories) : []
    }
  })
}

优化版本（适合大数据量，避免重复遍历目录数组） #

提前将所有目录按ParentId分组，减少重复遍历的性能开销：

export const createTreeData = (mainArray, directories) => {
  // 按ParentId预分组所有目录
  const dirGroup = directories.reduce((result, dir) => {
    if (!result[dir.ParentId]) result[dir.ParentId] = []
    result[dir.ParentId].push(dir)
    return result
  }, {})

  // 递归构建单个节点
  const buildTreeNode = (node) => {
    const children = dirGroup[node.Id] || []
    return {
      ...node,
      SubDirectories: children.map(buildTreeNode)
    }
  }

  return mainArray.map(buildTreeNode)
}

直接调用createTreeData(mainArray, directories)即可得到你需要的嵌套结构，可直接传入Material UI TreeView组件使用。

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