我有以下数据结构：
{
"data":[
{
"id":1,
"name":"EU Group",
"parent_id":null,
"children":[
{
"id":2,
"name":"EMEA Branch",
"parent_id":1,
"children":[
{
"id":5,
"name":"UK",
"parent_id":2,
"lr":","
},
{
"id":6,
"name":"France",
"parent_id":2,
"lr":","
},
{
"id":7,
"name":"Germany",
"parent_id":2,
"lr":","
},
{
"id":8,
"name":"Spain",
"parent_id":2,
"lr":","
},
{
"id":9,
"name":"Finland",
"parent_id":2,
"lr":","
},
{
"id":10,
"name":"Hungary",
"parent_id":2,
"lr":","
},
{
"id":11,
"name":"Poland",
"parent_id":2,
"children":[
{
"id":25,
"name":"Romania",
"parent_id":11,
"lr":","
}
],
"lr":","
},
{
"id":12,
"name":"Sweden",
"parent_id":2,
"lr":","
},
{
"id":16,
"name":"Italy",
"parent_id":2,
"lr":","
},
{
"id":17,
"name":"Czech",
"parent_id":2,
"lr":","
},
{
"id":18,
"name":"Denmark",
"parent_id":2,
"lr":","
},
{
"id":19,
"name":"Rest of the world",
"parent_id":2,
"lr":","
},
{
"id":36,
"name":"Middle East",
"parent_id":2,
"children":[
{
"id":21,
"name":"Russia",
"parent_id":36,
"lr":","
}
],
"lr":","
},
{
"id":38,
"name":"Africa",
"parent_id":2,
"children":[
{
"id":49,
"name":"Algeria",
"parent_id":38,
"lr":","
},
{
"id":50,
"name":"Morocco",
"parent_id":38,
"lr":","
}
],
"lr":","
},
{
"id":48,
"name":"Belgium",
"parent_id":2,
"lr":","
}
],
"lr":","
},
{
"id":45,
"name":"International Branch",
"parent_id":1,
"lr":","
},
{
"id":46,
"name":"APAC Branch",
"parent_id":1,
"children":[
{
"id":51,
"name":"Singapore",
"parent_id":46,
"lr":","
},
{
"id":52,
"name":"China",
"parent_id":46,
"lr":","
},
{
"id":53,
"name":"Vietnam",
"parent_id":46,
"lr":","
},
{
"id":54,
"name":"Indonesia",
"parent_id":46,
"lr":","
},
{
"id":55,
"name":"India",
"parent_id":46,
"lr":","
},
{
"id":56,
"name":"Malaysia",
"parent_id":46,
"lr":","
}
],
"lr":","
}
],
"lr":","
}
]
}
我正在尝试使用我创建的这个函数迭代它：
buildHierarchy(item) {
zone.children.forEach((child) => {
this.buildHierarchy(child);
})
}
在我的渲染函数中进一步调用它：
render() {
...
if (zones[0]) {
this.buildHierarchy(zones);
...
}
...
}
然而，当它击中没有孩子的物品时会中断。我怎样才能让它发挥作用？
答案 0 :(得分：0)
在使用forEach之前检查儿童：
buildHierarchy(zone) {
if(zone && zone.children)
zone.children.forEach(child => { this.buildHierarchy(child) })
}
我认为存在不匹配问题，您需要在zone方法中接收item而不是buildHierarchy。
检查此代码：
let data = {
"data":[
{
"id":1,
"name":"EU Group",
"parent_id":null,
"children":[
{
"id":2,
"name":"EMEA Branch",
"parent_id":1,
"children":[
{
"id":5,
"name":"UK",
"parent_id":2,
"lr":","
},
{
"id":6,
"name":"France",
"parent_id":2,
"lr":","
},
{
"id":7,
"name":"Germany",
"parent_id":2,
"lr":","
},
{
"id":8,
"name":"Spain",
"parent_id":2,
"lr":","
},
{
"id":9,
"name":"Finland",
"parent_id":2,
"lr":","
},
{
"id":10,
"name":"Hungary",
"parent_id":2,
"lr":","
},
{
"id":11,
"name":"Poland",
"parent_id":2,
"children":[
{
"id":25,
"name":"Romania",
"parent_id":11,
"lr":","
}
],
"lr":","
},
{
"id":12,
"name":"Sweden",
"parent_id":2,
"lr":","
},
{
"id":16,
"name":"Italy",
"parent_id":2,
"lr":","
},
{
"id":17,
"name":"Czech",
"parent_id":2,
"lr":","
},
{
"id":18,
"name":"Denmark",
"parent_id":2,
"lr":","
},
{
"id":19,
"name":"Rest of the world",
"parent_id":2,
"lr":","
},
{
"id":36,
"name":"Middle East",
"parent_id":2,
"children":[
{
"id":21,
"name":"Russia",
"parent_id":36,
"lr":","
}
],
"lr":","
},
{
"id":38,
"name":"Africa",
"parent_id":2,
"children":[
{
"id":49,
"name":"Algeria",
"parent_id":38,
"lr":","
},
{
"id":50,
"name":"Morocco",
"parent_id":38,
"lr":","
}
],
"lr":","
},
{
"id":48,
"name":"Belgium",
"parent_id":2,
"lr":","
}
],
"lr":","
},
{
"id":45,
"name":"International Branch",
"parent_id":1,
"lr":","
},
{
"id":46,
"name":"APAC Branch",
"parent_id":1,
"children":[
{
"id":51,
"name":"Singapore",
"parent_id":46,
"lr":","
},
{
"id":52,
"name":"China",
"parent_id":46,
"lr":","
},
{
"id":53,
"name":"Vietnam",
"parent_id":46,
"lr":","
},
{
"id":54,
"name":"Indonesia",
"parent_id":46,
"lr":","
},
{
"id":55,
"name":"India",
"parent_id":46,
"lr":","
},
{
"id":56,
"name":"Malaysia",
"parent_id":46,
"lr":","
}
],
"lr":","
}
],
"lr":","
}
]
}
function buildHierarchy(item){
console.log('name', item.name);
if(item && item.children){
item.children.forEach(el=>buildHierarchy(el));
}
}
buildHierarchy(data.data[0]);