渲染子菜单的问题在React JS中的infininit下拉菜单

Question

我正在构建一个reactjs电子商务网站，应该有一个多级下拉导航栏菜单

我做了一个下拉组件，还做了一个函数来呈现菜单和子菜单，这些菜单和子菜单是从API接收的类别

const renderSubMenu = (items: any) => {
const menu = items.map((item: any) => {
return (
<MenuItem text={item.name} cssStyle={{ fontSize: "15px" }}>
{item.children &&
item.children.length > 0 &&
renderSubMenu(item.children)}
</MenuItem>
);
});
return menu;
};

这是我的功能它可以帮助渲染菜单和子菜单但问题是它也会渲染重复的菜单

例如，我有一个像这样的数组

[
{
"id": 2,
"name": "لامپ ال ای دی",
"parent": null,
"children": [],
"icon": "http://185.206.147.122:8005/media/color_photos/6.png"
},
{
"id": 3,
"name": "چراغ خواب",
"parent": null,
"children": [],
"icon": "http://185.206.147.122:8005/media/color_photos/1.png"
},
{
"id": 4,
"name": "سیم برق",
"parent": null,
"children": [],
"icon": "http://185.206.147.122:8005/media/color_photos/3.png"
},
{
"id": 5,
"name": "لامپ رشد گیاه",
"parent": null,
"children": [],
"icon": "http://185.206.147.122:8005/media/color_photos/4.png"
},
{
"id": 6,
"name": "کابل برق",
"parent": null,
"children": [],
"icon": "http://185.206.147.122:8005/media/color_photos/5.png"
},
{
"id": 7,
"name": "لامپ مطالعه",
"parent": null,
"children": [],
"icon": "http://185.206.147.122:8005/media/color_photos/5_8sFlJ8o.png"
},
{
"id": 8,
"name": "لوازم اکترونیکی",
"parent": null,
"children": [
{
"id": 9,
"name": "کامپیوتر و تجهیزات",
"parent": 8,
"children": [
{
"id": 11,
"name": "ماوس و کیبورد",
"parent": 9,
"children": [
{
"id": 12,
"name": "ماوس",
"parent": 11,
"children": [
{
"id": 14,
"name": "ماوس بی سیم",
"parent": 12,
"children": [],
"icon": null
}
],
"icon": null
},
{
"id": 13,
"name": "کیبورد",
"parent": 11,
"children": [],
"icon": null
}
],
"icon": null
}
],
"icon": null
},
{
"id": 10,
"name": "تلفن همراه",
"parent": 8,
"children": [],
"icon": null
}
],
"icon": null
},
{
"id": 9,
"name": "کامپیوتر و تجهیزات",
"parent": 8,
"children": [
{
"id": 11,
"name": "ماوس و کیبورد",
"parent": 9,
"children": [
{
"id": 12,
"name": "ماوس",
"parent": 11,
"children": [
{
"id": 14,
"name": "ماوس بی سیم",
"parent": 12,
"children": [],
"icon": null
}
],
"icon": null
},
{
"id": 13,
"name": "کیبورد",
"parent": 11,
"children": [],
"icon": null
}
],
"icon": null
}
],
"icon": null
},
{
"id": 11,
"name": "ماوس و کیبورد",
"parent": 9,
"children": [
{
"id": 12,
"name": "ماوس",
"parent": 11,
"children": [
{
"id": 14,
"name": "ماوس بی سیم",
"parent": 12,
"children": [],
"icon": null
}
],
"icon": null
},
{
"id": 13,
"name": "کیبورد",
"parent": 11,
"children": [],
"icon": null
}
],
"icon": null
},
{
"id": 12,
"name": "ماوس",
"parent": 11,
"children": [
{
"id": 14,
"name": "ماوس بی سیم",
"parent": 12,
"children": [],
"icon": null
}
],
"icon": null
},
{
"id": 14,
"name": "ماوس بی سیم",
"parent": 12,
"children": [],
"icon": null
},
{
"id": 13,
"name": "کیبورد",
"parent": 11,
"children": [],
"icon": null
},
{
"id": 10,
"name": "تلفن همراه",
"parent": 8,
"children": [],
"icon": null
}
]

Answer 1

const renderChild = (items: any) => {
return items.map((item: any) => {
if (item.children && item.children.length > 0) {
return (
<MenuItem text={item.name} cssStyle={{ fontSize: "15px" }}>
{renderChild(item.children)}
</MenuItem>
);
} else {
return (
<MenuItem
text={item.name}
cssStyle={{ fontSize: "15px" }}
></MenuItem>
);
}
});
};
const renderSubMenu = (items: any) => {
const menu = items.map((item: any) => {
if (item.parent === null) {
if (item.children && item.children.length > 0) {
return (
<MenuItem text={item.name} cssStyle={{ fontSize: "15px" }}>
{renderChild(item.children)}
</MenuItem>
);
} else {
return (
<MenuItem text={item.name} cssStyle={{ fontSize: "15px" }}>
</MenuItem>
);
}
}
});
return menu;
};