如何将Ant Design Cascader返回的数组转为Tree组件可用树形结构？

我使用Ant Design的Cascader组件时，它返回的选中值是一组路径数组，结构如下：

[
    ["zhejiang", "hangzhou2"],
    ["zhejiang", "hangzhou", "a", "a1"],
    ["jiangsu", "nanjing", "zhonghuamen"],
    ["zhejiang", "hangzhou", "a", "a2"],
    ["zhejiang", "hangzhou", "a", "a3"]
]

需要把这个结构转换成适配Ant Design Tree组件的树形结构，目标格式如下（注：原示例中jiangsu下的hangzhou2为笔误，实际转换不会生成该节点）：

[
    {
        "title":"zhejiang",
        "key":"zhejiang",
        "children":[
            {  
                "title":"hangzhou2",
                "key":"hangzhou2"
            },
            {
                "title":"hangzhou",
                "key":"hangzhou",
                "children":[
                    {
                        "title":"a",
                        "key":"a",
                        "children":[
                            {"title":"a1","key":"a1"},
                            {"title":"a2","key":"a2"},
                            {"title":"a3","key":"a3"}
                        ]
                    }
                ]
            }
        ]
    },
    {
        "title":"jiangsu",
        "key":"jiangsu",
        "children":[
            {
                "title":"nanjing",
                "key":"nanjing",
                "children":[
                    {"title":"zhonghuamen","key":"zhonghuamen"}
                ]
            }
        ]
    }
]

解决方案代码 #

function convertPathsToTree(paths) {
    const tree = [];
    const nodeMap = new Map();

    paths.forEach(path => {
        let currentLevel = tree;

        path.forEach((key, index) => {
            let node = nodeMap.get(key);
            // 节点不存在则创建并加入当前层级
            if (!node) {
                node = { title: key, key: key };
                nodeMap.set(key, node);
                currentLevel.push(node);
            }
            // 非最后一个节点时，切换到子节点层级
            if (index < path.length - 1) {
                if (!node.children) {
                    node.children = [];
                }
                currentLevel = node.children;
            }
        });
    });

    return tree;
}

// 调用示例
const cascaderData = [
    ["zhejiang", "hangzhou2"],
    ["zhejiang", "hangzhou", "a", "a1"],
    ["jiangsu", "nanjing", "zhonghuamen"],
    ["zhejiang", "hangzhou", "a", "a2"],
    ["zhejiang", "hangzhou", "a", "a3"]
];

const treeData = convertPathsToTree(cascaderData);
console.log(treeData);

逻辑说明 #

1. 节点去重：用Map存储已创建的节点，避免同一key的节点被重复创建，保证树形结构的唯一性。
2. 逐层构建：遍历每一条路径，从根层级开始，依次检查每个节点是否存在，不存在则创建并加入当前层级；如果不是路径的最后一个节点，就切换到该节点的children层级继续处理后续节点。
3. 自动初始化children：当节点需要包含子节点时，自动创建children数组，确保输出结构完全符合Ant Design Tree组件的要求。

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