Javascript 应用map函数可以工作,而foreach函数不起作用
我有一个react应用程序,它使用map函数显示嵌套json中的项目,但是其中一个类别可能是空的,这会使整个应用程序崩溃。我已经使用js为每个函数测试了相同json的foreach函数,它工作得很好,我试图翻译同样的逻辑来解决空类别问题 下面是我对同一json上的每个测试的建议,但有以下列表: 测试1Javascript 应用map函数可以工作,而foreach函数不起作用,javascript,json,reactjs,ecmascript-6,foreach,Javascript,Json,Reactjs,Ecmascript 6,Foreach,我有一个react应用程序,它使用map函数显示嵌套json中的项目,但是其中一个类别可能是空的,这会使整个应用程序崩溃。我已经使用js为每个函数测试了相同json的foreach函数,它工作得很好,我试图翻译同样的逻辑来解决空类别问题 下面是我对同一json上的每个测试的建议,但有以下列表: 测试1 您在多个位置缺少对象空检查 在ItemList组件的render函数中有一个else语句,您可以在其中分配selectedChild和selectedItem。您需要检查activelist.ch
您在多个位置缺少对象空检查 在ItemList组件的render函数中有一个else语句,您可以在其中分配selectedChild和selectedItem。您需要检查activelist.children和 selectedChild.children是否为空 要呈现selectedChild,应检查子项是否为空。 要呈现selectedItem,应检查子项是否为空
let obj = {
"name": "Menu",
"children": [
{
"type": "category",
"name": "Burgers",
"children": [
{
"type": "item",
"name": "Burger 1",
"children": [
{
"type": "modifier",
"name": "Promo",
"children": [
{
"type": "item",
"name": "Promo 1"
}
]
},
{
"type": "group",
"name": "Drinks",
"children": [
{
"type": "item",
"name": "Coke"
},
{
"type": "item",
"name": "Light Coke"
},
{
"type": "item",
"name": "Sprite"
},
{
"type": "item",
"name": "Fanta"
}
]
},
{
"type": "modifier",
"name": "Without",
"children": [
{
"type": "ingredient",
"name": "Onion"
},
{
"type": "ingredient",
"name": "Tomato"
},
{
"type": "ingredient",
"name": "Pickles"
}
]
}
]
},
{
"type": "item",
"name": "Burger 2",
"children": [
{
"type": "modifier",
"name": "Promo",
"children": [
{
"type": "item",
"name": "Promo 1"
}
]
},
{
"type": "group",
"name": "Drinks",
"children": [
{
"type": "item",
"name": "Coke"
},
{
"type": "item",
"name": "Light Coke"
},
{
"type": "item",
"name": "Sprite"
},
{
"type": "item",
"name": "Fanta"
}
]
},
{
"type": "modifier",
"name": "Without",
"children": [
{
"type": "ingredient",
"name": "Onion"
},
{
"type": "ingredient",
"name": "Tomato"
},
{
"type": "ingredient",
"name": "Pickles"
}
]
}
]
},
{
"type": "item",
"name": "Coming Soon Offers"
}
]
},
{
"type": "category",
"name": "Pizzas",
"children": [
{
"type": "item",
"name": "Pizza 1",
"children": [
{
"type": "modifier",
"name": "Promo",
"children": [
{
"type": "item",
"name": "Promo 1"
}
]
},
{
"type": "group",
"name": "Drinks",
"children": [
{
"type": "item",
"name": "Coke"
},
{
"type": "item",
"name": "Light Coke"
},
{
"type": "item",
"name": "Sprite"
},
{
"type": "item",
"name": "Fanta"
}
]
},
{
"type": "modifier",
"name": "Without",
"children": [
{
"type": "ingredient",
"name": "Onion"
},
{
"type": "ingredient",
"name": "Mashrooms"
},
{
"type": "ingredient",
"name": "Olives"
}
]
}
]
},
{
"type": "item",
"name": "Pizza 2",
"children": [
{
"type": "modifier",
"name": "Promo",
"children": [
{
"type": "item",
"name": "Promo 1"
}
]
},
{
"type": "group",
"name": "Drinks",
"children": [
{
"type": "item",
"name": "Coke"
},
{
"type": "item",
"name": "Light Coke"
},
{
"type": "item",
"name": "Sprite"
},
{
"type": "item",
"name": "Fanta"
}
]
},
{
"type": "modifier",
"name": "Without",
"children": [
{
"type": "ingredient",
"name": "Onion"
},
{
"type": "ingredient",
"name": "Mashrooms"
},
{
"type": "ingredient",
"name": "Olives"
}
]
}
]
}
]
}
]
}
let body = document.querySelector('body');
function print(obj){
let str = `<li>${obj.name}</li>`;
if(obj.children){
str += '<ul>'
for(let c of obj.children) str += print(c)
str += '</ul>'
}
return str;
}
document.body.innerHTML = print(obj);
const buildMenu = (data) => {
let ul = document.createElement('ul');
data.children.forEach(i => {
let li = document.createElement('li');
li.innerText = i.name;
li.className = i.type;
if (i.children) li.appendChild(buildMenu(i));
ul.appendChild(li);
});
return ul;
};
let data = {
"name": "Menu",
"children": [{
"type": "category",
"name": "Burgers",
"children": [{
"type": "item",
"name": "Burger 1",
"children": [{
"type": "modifier",
"name": "Promo",
"children": [{
"type": "item",
"name": "Promo 1"
}]
},
{
"type": "group",
"name": "Drinks",
"children": [{
"type": "item",
"name": "Coke"
},
{
"type": "item",
"name": "Light Coke"
},
{
"type": "item",
"name": "Sprite"
},
{
"type": "item",
"name": "Fanta"
}
]
},
{
"type": "modifier",
"name": "Without",
"children": [{
"type": "ingredient",
"name": "Onion"
},
{
"type": "ingredient",
"name": "Tomato"
},
{
"type": "ingredient",
"name": "Pickles"
}
]
}
]
},
{
"type": "item",
"name": "Burger 2",
"children": [{
"type": "modifier",
"name": "Promo",
"children": [{
"type": "item",
"name": "Promo 1"
}]
},
{
"type": "group",
"name": "Drinks",
"children": [{
"type": "item",
"name": "Coke"
},
{
"type": "item",
"name": "Light Coke"
},
{
"type": "item",
"name": "Sprite"
},
{
"type": "item",
"name": "Fanta"
}
]
},
{
"type": "modifier",
"name": "Without",
"children": [{
"type": "ingredient",
"name": "Onion"
},
{
"type": "ingredient",
"name": "Tomato"
},
{
"type": "ingredient",
"name": "Pickles"
}
]
}
]
},
{
"type": "item",
"name": "Coming Soon Offers"
}
]
},
{
"type": "category",
"name": "Pizzas",
"children": [{
"type": "item",
"name": "Pizza 1",
"children": [{
"type": "modifier",
"name": "Promo",
"children": [{
"type": "item",
"name": "Promo 1"
}]
},
{
"type": "group",
"name": "Drinks",
"children": [{
"type": "item",
"name": "Coke"
},
{
"type": "item",
"name": "Light Coke"
},
{
"type": "item",
"name": "Sprite"
},
{
"type": "item",
"name": "Fanta"
}
]
},
{
"type": "modifier",
"name": "Without",
"children": [{
"type": "ingredient",
"name": "Onion"
},
{
"type": "ingredient",
"name": "Mashrooms"
},
{
"type": "ingredient",
"name": "Olives"
}
]
}
]
},
{
"type": "item",
"name": "Pizza 2",
"children": [{
"type": "modifier",
"name": "Promo",
"children": [{
"type": "item",
"name": "Promo 1"
}]
},
{
"type": "group",
"name": "Drinks",
"children": [{
"type": "item",
"name": "Coke"
},
{
"type": "item",
"name": "Light Coke"
},
{
"type": "item",
"name": "Sprite"
},
{
"type": "item",
"name": "Fanta"
}
]
},
{
"type": "modifier",
"name": "Without",
"children": [{
"type": "ingredient",
"name": "Onion"
},
{
"type": "ingredient",
"name": "Mashrooms"
},
{
"type": "ingredient",
"name": "Olives"
}
]
}
]
}
]
}
]
};
document.body.appendChild(buildMenu(data));
const selectedChild = activelist.children.length ? activelist.children[this.state.selected] : null;
const selectedItem = selectedChild.children && selectedChild.children.length
? selectedChild.children[this.state.itemSelected]: null;
{
selectedChild &&
selectedChild.children &&
selectedChild.children.length &&
selectedChild.children.map(
(item, index) => (
<Item
className="person"
key={index}
Title={item.name}
onClick={this.handleClick}
index={index}
/>
)
)}
<div>
{ selectedItem &&
selectedItem.children &&
selectedItem.children.map((item, index) => (
<Modifiers
key={index}
title={item.name}
myKey={index}
options={item.children}
childk={item.id}
/>
))
}
</div>
<div>
{
selectedItem &&
selectedItem.size &&
(<div>
<Size
options={selectedItem.size}
sizetitle={"Size"}
/>
</div>)
}
</div>