如何将Laravel从MySQL获取的扁平JSON转换为React Treeview层级格式？

一、后端Laravel直接转换（推荐） #

直接在后端把扁平数据处理成层级结构，前端拿到就能直接用，省去前端额外处理的麻烦。

写一个递归辅助函数：

function buildTree(array $items, int $parentId = 0): array
{
    $tree = [];
    foreach ($items as $item) {
        if ($item['parent_id'] === $parentId) {
            $children = buildTree($items, $item['id']);
            if (!empty($children)) {
                $item['children'] = $children;
            }
            $tree[] = $item;
        }
    }
    return $tree;
}

然后在控制器中调用使用：

// 从数据库获取扁平结构数据
$flatItems = YourModel::select('id', 'parent_id', 'label')->get()->toArray();
// 转换为层级结构
$treeData = buildTree($flatItems);
// 返回JSON格式的层级数据给前端
return response()->json($treeData);

这样前端拿到的JSON结构就和你现有Treeview示例的结构完全一致，直接传入组件即可。

二、前端React处理转换层级 #

如果不想修改后端逻辑，前端也可以自行处理扁平数据转层级结构，写一个递归函数即可：

function buildTree(items, parentId = 0) {
  return items
    .filter(item => item.parent_id === parentId)
    .map(item => ({
      ...item,
      children: buildTree(items, item.id)
    }));
}

// 使用示例
const flatData = await fetch('/your-api-url').then(res => res.json());
const treeData = buildTree(flatData);

将处理后的treeData直接传给你的Treeview组件即可渲染。

三、更高效的Treeview填充方式 #

1. 懒加载（按需加载）
   如果数据量较大，一次性加载所有数据会导致页面卡顿，可以采用懒加载模式：点击父节点时，再请求后端获取该节点的子节点。

• 后端新增接口，接收parent_id参数返回对应子节点：

  public function getChildren(Request $request)
  {
      $parentId = $request->input('parent_id', 0);
      $children = YourModel::where('parent_id', $parentId)->select('id', 'parent_id', 'label')->get();
      return response()->json($children);
  }
  

• 前端Treeview组件监听节点展开事件，调用上述接口获取子节点，再渲染到对应父节点下。

2. 数据库结构优化
   如果数据层级复杂、查询频率高，可以考虑采用嵌套集模型或闭包表来存储层级数据，相比parent_id的递归查询，这种方式的查询效率会更高。不过需要调整表结构和查询逻辑，适合数据量特别大的场景。

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