如何将嵌套数据递归转换为 Ant Design Tree 组件可用的树形结构-js教程-PHP中文网

如何将嵌套数据递归转换为 Ant Design Tree 组件可用的树形结构

本文介绍如何将任意深度的嵌套后端数据（如多层 children 关系）通过递归映射，转换为 Ant Design Tree 组件所需的标准化 treeData 格式，解决 data.forEach is not a function 错误及深层节点丢失问题。

本文介绍如何将任意深度的嵌套后端数据（如多层 children 关系）通过递归映射，转换为 ant design tree 组件所需的标准化 treedata 格式，解决 `data.foreach is not a function` 错误及深层节点丢失问题。

Ant Design 的组件要求传入的 treeData 是一个符合特定结构的扁平化数组：每个节点必须包含 title、key 和可选的 children（类型为数组，且其元素也需满足相同结构）。而实际业务中，服务端返回的数据往往以嵌套对象形式存在（例如 childs 字段可能为 null、undefined 或数组），直接使用 .map() 仅能处理单层或固定层级，无法应对动态深度（如 4 层甚至更深）。

关键在于实现一个健壮的递归转换函数，它能自动识别并处理任意层级的子节点。以下为推荐实现：

const flattenData = (data) => {
  // 安全处理：若 data 为 null/undefined/非数组，则返回空数组
  if (!Array.isArray(data) || data.length === 0) return [];

  return data.map((item) => ({
    title: item.title ?? '', // 防止 title 为 undefined
    key: item.id ?? item.key ?? Math.random().toString(36).substr(2, 9), // 确保 key 存在
    children: flattenData(item.childs), // 递归处理子节点
  }));
};

// 注意：服务端返回的根节点通常是单个对象（非数组），因此需包裹成数组
const treeData = flattenData([chart]);

✅ 为什么原代码会报错 data.forEach is not a function？
因为 chart?.childs 可能是 null、undefined 或字符串等非数组类型，直接调用 .map() 会失败。上述 flattenData 函数通过 Array.isArray(data) 和早期返回机制，彻底规避该问题。

✅ 如何适配不同字段名？
若后端字段不是 childs 而是 children、subItems 或 nodes，只需修改递归调用中的属性名即可：

children: flattenData(item.children), // 替换为实际字段名

✅ 完整组件使用示例：

女娲.skill

女娲.skill是一款AI开发辅助工具，独立开发者花叔开源的 SKill 项目。

下载

import { Tree } from 'antd';

const TreeComponent = ({ chart }) => {
  const flattenData = (data) => {
    if (!Array.isArray(data) || data.length === 0) return [];
    return data.map(item => ({
      title: item.title ?? 'Untitled',
      key: item.id ?? String(Date.now() + Math.random()),
      children: flattenData(item.childs),
    }));
  };

  const treeData = flattenData([chart] || []);

  return <tree treedata="{treeData}" defaultexpandall></tree>;
};

export default TreeComponent;

? 注意事项总结：