我正在使用 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))
关于javascript - 映射对象数组但仅显示唯一值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66231277/