如何使用MUI TreeView渲染带引用关系的API树形数据？

1. 先把扁平API数据转换为嵌套树形结构 #

首先需要将API返回的扁平数据处理成MUI TreeView所需的嵌套结构。根据你提到的关联规则（子节点通过entry.item.id关联父节点的id），可以编写如下转换函数：

// 转换扁平数据为树形结构
const buildTree = (data) => {
  const nodeMap = new Map();
  const tree = [];

  // 先把所有节点存入Map，方便快速查找
  data.forEach(node => {
    nodeMap.set(node.id, { ...node, children: [] });
  });

  // 遍历每个节点，找到对应的父节点并添加为子节点
  data.forEach(node => {
    if (node.entry?.item?.id) {
      const parentId = node.entry.item.id;
      const parentNode = nodeMap.get(parentId);
      if (parentNode) {
        parentNode.children.push(nodeMap.get(node.id));
      }
    } else {
      // 无父节点的为根节点，直接加入树形数组
      tree.push(nodeMap.get(node.id));
    }
  });

  return tree;
};

2. 递归渲染MUI TreeView组件 #

接下来需要创建递归组件，用来渲染嵌套的TreeItem。以下是完整的组件示例（需提前导入MUI相关组件）：

import React, { useState, useEffect } from 'react';
import TreeView from '@mui/lab/TreeView';
import TreeItem from '@mui/lab/TreeItem';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import ChevronRightIcon from '@mui/icons-material/ChevronRight';

const CustomTreeView = () => {
  const [treeData, setTreeData] = useState([]);

  // 从API获取并处理数据
  useEffect(() => {
    const fetchData = async () => {
      // 替换为你的实际API请求逻辑
      const response = await fetch('/your-api-endpoint');
      const apiData = await response.json();
      // 转换为树形结构
      const formattedTree = buildTree(apiData);
      setTreeData(formattedTree);
    };

    fetchData();
  }, []);

  // 递归渲染节点
  const renderTree = (nodes) => (
    nodes.map((node) => (
      <TreeItem key={node.id} nodeId={node.id} label={node.name}>
        {node.children && node.children.length > 0 && renderTree(node.children)}
      </TreeItem>
    ))
  );

  // 数据转换函数
  const buildTree = (data) => {
    const nodeMap = new Map();
    const tree = [];

    data.forEach(node => {
      nodeMap.set(node.id, { ...node, children: [] });
    });

    data.forEach(node => {
      if (node.entry?.item?.id) {
        const parentId = node.entry.item.id;
        const parentNode = nodeMap.get(parentId);
        if (parentNode) {
          parentNode.children.push(nodeMap.get(node.id));
        }
      } else {
        tree.push(nodeMap.get(node.id));
      }
    });

    return tree;
  };

  return (
    <TreeView
      aria-label="关联树形结构"
      defaultCollapseIcon={<ExpandMoreIcon />}
      defaultExpandIcon={<ChevronRightIcon />}
      sx={{ height: 240, flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
    >
      {renderTree(treeData)}
    </TreeView>
  );
};

export default CustomTreeView;

关键说明 #

• 数据转换逻辑：通过Map存储所有节点，遍历每个节点时根据entry.item.id匹配父节点，将当前节点添加到父节点的children数组；无父节点的直接作为根节点。
• 递归渲染：renderTree函数遍历节点，若节点存在子节点则递归调用自身，生成嵌套的TreeItem结构。
• 依赖检查：确保已安装@mui/lab（TreeView属于实验性组件）、@mui/material和@mui/icons-material依赖包。

内容的提问来源于stack exchange，提问作者Oğuzhan Yıldırım