我正在使用React创建一个菜单应用程序。我的应用程序接受一系列对象，然后需要将它们映射到菜单中。菜单的结构如下：
Title
Header
Item
Item
Header
Item
Item
我收到的数据对象的结构如下：{title: "Drinks", header: "Beer", item: "Blue Moon"}。我过滤了数组，所以我只得到具有相同标题的对象。我的问题是我不知道会有多少个不同的标题。我需要我的映射函数来显示每个标题和所有关联的项目。当前，标题是在映射功能之外处理的，因为每个菜单只有一个标题。
<div className={style.menuItemTitle}>{title}</div>
{currentMenu.map((item, index) => (
<div className={style.menuHeader}>{item.header}</div>
<div className={style.menuItem}>{item.item}</div>
))}
上面的代码列出了每个项目上方的标题。我只希望每个标题与下面的所有关联项目一起显示一次。
const uniqueHeaders=(menu)=>{
let result=[];
for (let item of menu){
if (result.indexOf(item.header)===-1){
result.push(item.header)
};
};
return result
}
uniqueHeaders(currentMenu).map(uniqueHeader=>
currentMenu.filter(item=>
item.header===uniqueHeader).map(element=>
element.item))
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句