React递归渲染树形节点异常，求正确实现方案

问题根源 #

你的代码中，treeRender函数的for循环里每次迭代都直接return，导致循环只执行一次就终止，仅处理了第一个键值对（__global），后续的节点（比如group1）完全没有被遍历到，所以只能渲染出部分结构。

修正后的代码 #

const treeRender = (data: any) => {
  const nodes = [];
  for (const [name, value] of Object.entries(data)) {
    // 排除null，避免将null误判为文件夹
    if (typeof value === "object" && value !== null) {
      nodes.push(
        <StyledTreeItem
          key={name}
          nodeId={name}
          labelText={name}
          labelIcon={FolderIcon}
        >
          {treeRender(value)}
        </StyledTreeItem>
      );
    } else {
      nodes.push(
        <StyledTreeItem
          key={name}
          nodeId={name}
          labelText={name}
          labelIcon={InsertDriveFileIcon}
        />
      );
    }
  }
  return nodes;
};

return (
  <TreeView
    aria-label="filePicker"
    defaultExpanded={["3"]}
    defaultCollapseIcon={<ArrowDropDownIcon />}
    defaultExpandIcon={<ArrowRightIcon />}
    defaultEndIcon={<div style={{ width: 24 }} />}
    sx={{ height: 264, flexGrow: 1, maxWidth: 400, overflowY: "auto" }}
  >
    {treeRender(fileTree)}
  </TreeView>
);

关键修改说明 #

1. 用数组nodes收集所有遍历生成的JSX节点，不再在循环内直接return，确保所有键值对都被处理。
2. 增加value !== null的判断，因为typeof null的结果是"object"，避免将null错误渲染为文件夹。
3. 遍历完成后返回整个节点数组，React会自动渲染数组中的每一个元素，完整展示树形结构。

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