javascript - 映射对象数组但仅显示唯一值

Question

我正在使用 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>
        ))}

上面的代码列出了每个项目上方的标题。我只希望每个标题与下面的所有关联项目一起显示一次。

Answer 1

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))