我正在使用react-tree-graph，并且正在创建一个数据对象，但是我想使用后端api来填充数据对象的属性。我尝试使用.map方法遍历我的api，但无法弄清楚如何使其工作。这是数据对象，下面是我的api中的对象。
BarContainer我想通过此变量映射字符串，而不是像这样用对象填充
let data = {
name: 'Water',
children: [
{
name: 'Earth',
children: [
{
name: 'Air',
children: [
{
name: 'Fire',
children: [],
},
{
name: 'Fire2',
children: [],
},
],
},
{
name: 'Air2',
children: [
{
name: 'Fire3',
children: [],
},
{
name: 'Fire4',
children: [],
},
],
},
],
},
{
name: 'Earth2',
children: [
{
name: 'Air3',
children: [
{
name: 'Fire5',
children: [],
},
{
name: 'Fire6',
children: [],
},
],
},
{
name: 'Air4',
children: [
{
name: 'Fire7',
children: [],
},
{
name: 'Fire8',
children: [],
},
],
},
],
},
],
};
我只是想知道如何使用该对象并通过它映射以填充数据对象内部的不同属性
这是您遇到的问题的解决方案，我已经进行了递归工作。
let data = {
name: 'Water',
children: [
{
name: 'Earth',
children: [
{
name: 'Air',
children: [
{
name: 'Fire',
children: [],
},
{
name: 'Fire2',
children: [],
},
],
},
{
name: 'Air2',
children: [
{
name: 'Fire3',
children: [],
},
{
name: 'Fire4',
children: [],
},
],
},
],
},
{
name: 'Earth2',
children: [
{
name: 'Air3',
children: [
{
name: 'Fire5',
children: [],
},
{
name: 'Fire6',
children: [],
},
],
},
{
name: 'Air4',
children: [
{
name: 'Fire7',
children: [],
},
{
name: 'Fire8',
children: [],
},
],
},
],
},
],
};
let counter = 1;
function recursiveNaming(data) {
return data.children.reduce((acc, curr) => {
let obj;
let currentObj = {...acc, [curr.name]:`name${counter++}`};
if(curr.children.length) {
obj = recursiveNaming(curr);
}
return {...currentObj, ...obj };
},{})
};
console.log(recursiveNaming(data))