javascript - 我有一个具有父 id 的平面数组，我想将其嵌套起来，就像使用 javascript 的树父子数组一样

Question

嗨 friend 们，我在 React 中有一个平面数组，它有父字段，我想制作一个简单的 javacsript 算法或带有映射的 React 算法，并使其嵌套并且像树关系数组一样

this.state = {
    Catgeory: [
        {id:'1' , name:'parent_1' , parentId:'0'},
        {id:'2' , name:'child_1' , parentId:'1'},
        {id:'3' , name:'child_2' , parentId:'1'},

        {id:'4' , name:'parent_2' , parentId:'0'},
        {id:'5' , name:'child_1' , parentId:'4'},
        {id:'6' , name:'child_2' , parentId:'4'},
    ],
}

我希望这个数组像这样，然后如果发生这种情况，我可以用我的方式映射到该数组......

Catgeory: [
    {
        id:'1' ,
        name:'parent_1' ,
        parentId:'0',
        subCategory: [{
            id:'2' ,
            name:'child_1',
            parentId:'1'
        }, {
            id:'3' ,
            name:'child_2' ,
            parentId:'1'
        }]
    }, {
        id:'4' ,
        name:'parent_2' ,
        parentId:'0',
        subCategory: [{
            id:'5' ,
            name:'child_1',
            parentId:'4'
        }, {
            id:'6' ,
            name:'child_2' ,
            parentId:'4'
        }]
    },
]

Answer 1

首先，您将循环遍历数组并找到任何带有 parentId === 0 的内容，使用这些元素创建一个新数组，并向每个数组添加一个“子类别”数组。

然后您将循环遍历，找到 parentId !== 0 的位置，将父元素与新元素进行匹配，并将新元素插入父元素子类别属性(property)

[编辑]类似这样的内容:

state= {
        Category:[
                  {id:'1' , name:'parent_1' , parentId:'0'},
                  {id:'2' , name:'child_1' , parentId:'1'},
                  {id:'3' , name:'child_2' , parentId:'1'},

                  {id:'4' , name:'parent_2' , parentId:'0'},
                  {id:'5' , name:'child_1' , parentId:'4'},
                  {id:'6' , name:'child_2' , parentId:'4'},


                 ],
    }


var parents = state.Category.filter(c => c.parentId === '0').map(o => {
    var parent = Object.assign({}, o);
    parent.subCategory = [];
    return parent;
})


state.Category.filter(c => c.parentId !== '0').forEach(o => {
    var parent = parents.find(p => p.id === o.parentId);
    parent.subCategory.push(Object.assign({}, o));
})

console.log(parents);