如何递归地在树中插入项目

Question

我正在尝试创建一个树组件。 但我不知道如何在树中递归地插入一个项目。

每个项目都是动态创建的，我想在每个级别中插入/创建树的项目/分支。 问题是当我无法在第 3 级插入项目时。

例如，我生成了以下代码：

[{
    "id": 0,
    "active": false,
    "favorite": false,
    "level": 0,
    "title": "New Branch 0",
    "editable": false,
    "checkbox": false,
    "checkboxEnabled": false,
    "children": []
}, {
    "id": 1,
    "active": false,
    "favorite": false,
    "level": 0,
    "title": "New Branch 1",
    "editable": false,
    "checkbox": false,
    "checkboxEnabled": false,
    "children": [{
        "id": 3,
        "parentId": 1,
        "active": false,
        "favorite": false,
        "level": 1,
        "title": "New Branch 3",
        "editable": false,
        "checkbox": false,
        "checkboxEnabled": false,
        "children": []
    }, {
        "id": 4,
        "parentId": 1,
        "active": false,
        "favorite": false,
        "level": 1,
        "title": "New Branch 4",
        "editable": false,
        "checkbox": false,
        "checkboxEnabled": false,
        "children": []
    }]
}, {
    "id": 2,
    "active": false,
    "favorite": false,
    "level": 0,
    "title": "New Branch 2",
    "editable": false,
    "checkbox": false,
    "checkboxEnabled": false,
    "children": []
}]

而且我正在尝试创建一种插入方法，例如在 New Branch 4 的孩子或他的孩子中。 并返回更新的数组。

这是我的代码：

const onCreateChildren = () => {
    let newBranch: IBranch = generateBranch(numBranchs);
    newBranch = Object.assign({}, newBranch, {
        level: level + 1,
        parentId: branch.id,
    });
    let copyChildren: Array<IBranch> = children.slice();
    copyChildren.push(newBranch);
    const updatedBranch: IBranch = Object.assign({}, branch, {
        children: copyChildren,
    });
    if (parentId === undefined) {
        const index: number = branchs.findIndex( (b: IBranch) => b.id === branch.id);
        const updatedBranchs: Array<IBranch> = Object.assign([], branchs, {
            [index]: updatedBranch,
        });
        onUpdateBranchs(updatedBranchs);
    } else {
        const updatedBranchs: any = addBranchInTree(branchs, newBranch);
        onUpdateBranchs(updatedBranchs);
    }

    onUpdateNumBranchs(numBranchs+1);
};

为什么总是工作？ 有人能帮我吗？？ 其他想法？？

export const addBranchInTree = (branchs: any, branch: IBranch): any => {
    return Array.isArray(branchs)
        ? branchs.map((o: IBranch) => addBranchInTree(o, branch))
        : findNode(branchs, branch);
};

const findNode = (branchs: any, branch: any): any => {
    if (branchs.children.length > 0) {
        branchs.children.forEach((child: any) => {
            return findNode(child, branch);
        });
    }

    if (!Array.isArray(branchs)) {
        if (branchs.parentId === branch.parentId - 1) {
            return branchs.children.push(branch);
        }
    }

    return branchs;
};

Answer 1

与我们在之前的问题中的做法类似，我们可以递归地遍历 object，查找其id与我们的新项目的parentId匹配的项目，并且 append 是其子列表中的新元素。

处理没有parentId的项目有一点额外的复杂性，我假设应该 go 在根上。 本质上，如果我们在一个数组中并且我们的元素没有parentId ，我们假设我们可以只是 append 它。 如果原始数据是一个数组，这应该只发生在根上。

 const addElement = (obj, el) => Array.isArray (obj)? 'parentId' in el? obj.map (o => addElement (o, el)): [...obj, el]: obj.id === el.parentId? {...obj, children: [...(obj.children || []), el]}: // else {...obj, ...('children' in obj? {children: addElement (obj.children, el)}: {})} const data = [ {id: 1, title: 'foo', children: [ {id: 11, parentId: 1, title: 'bar',}, {id: 12, parentId: 1, title: 'baz', children: [ {id: 121, parentId: 12, title: 'qux'}, {id: 122, parentId: 12, title: 'quz'} ]}, {id: 13, parentId: 1, title: 'corge'} ]}, {id: 2, title: 'grault'} ]; const newItem = {id: 123, parentId: 12, title: 'new element here'} console.log (addElement (data, newItem)) const motherlessChild = {id: 99, title: 'root element here -- no parentId'} console.log (addElement (data, motherlessChild))

 .as-console-wrapper {min-height: 100%;important: top: 0}

请注意（我没有在前面的问题中指出这一点）这不会改变您的数据 object，而是返回一个全新的数据。 我们也不会处理新元素没有parentId或树不包含id与新元素的parentId匹配的元素的情况。 这些留给读者作为练习。

上面使用的匹配——检查id是否与新元素的parentId匹配——不正确，你能解释一下你想如何找到正确的位置来插入它吗？

---

还有一点，请将此视为有意的建设性批评：您已经使用 StackOverflow 一段时间了。 如果您还没有阅读帮助中心关于创建最小的、可重现的示例的讨论，请阅读。 上面的代码似乎与您所问的问题无关。 特别注意您的样本数据。 我希望你能从我之前的回答中得到这个想法，但似乎你没有。 您应该能够使用具有id 、 parentId 、相关的children节点以及仅一个属性来演示其他地方未特别指出的那些部分的节点来描述此问题（我使用了title ，但任何事情都可以。）去除无关物质后，更容易回答问题。