嘗試過濾對象數組

Question

我有以下數據：

[
    {
        category: 'FOOD',
        name: 'Canape Two',
        menuSections: [
            {
                name: 'Package',
            },
        ],
    },
    {
        category: 'FOOD',
        name: 'Canape One',
        menuSections: [
            {
                name: 'Package',
            },
        ],
    },
    {
        category: 'DRINK',
        name: 'Package One',
        menuSections: [
            {
                name: 'Drink Packages',
            },
        ],
    },
]

我希望能夠通過以下方式在 React 中呈現上述數據：

Package (Name of Section)
 - Canape One (Name of Menu Item)
 - Canape Two (Name of Menu Item)

Drink Packages (Name of Section
 - Package One (Name of Menu Item)

每個菜單項將來也可能有一個子項。 我對如何實現這一目標沒有明確的想法。 您的幫助將不勝感激。

Answer 1

關鍵是將您的數據放入可管理的 state。我在這里創建一個 object，其中鍵是部分名稱，值是包含部分名稱和項目數組的 object。 然后，您可以使用Object.values提取值，為您提供一個可以正確迭代的對象數組。

 function Example({ menu }) { // `reduce` over the menu array to create an object // identified by a section name key. The object will // have a section name, and an array of items const sections = menu.reduce((acc, item) => { const { menuSections: [{ name }], ...rest } = item; acc[name] = acc[name] || { name, items: [] }; acc[name].items.push(rest); return acc; }, {}); // Get the array of objects (values) from the // the sections object we created, and `map` over it // creating a new section for each object in the array return ( <main> <section> {Object.values(sections).map(data => { return <Section section={data} />; })} </section> </main> ); } // Add the name, and add a list. Iterate over the // items array to produce a sorted list of items function Section({ section }) { return ( <section> <p className="sectionName">{section.name}</p> <ul> {section.items.sort((a, b) => a.name.localeCompare(b.name)).map(item => <Item item={item} />)} </ul> </section> ); } // Returns a list item function Item({ item }) { return <li>{item.name}</li>; } const menu=[{category:"FOOD",name:"Canape Two",menuSections:[{name:"Package"}]},{category:"FOOD",name:"Canape One",menuSections:[{name:"Package"}]},{category:"DRINK",name:"Package One",menuSections:[{name:"Drink Packages"}]}]; ReactDOM.render( <Example menu={menu} />, document.getElementById('react') );

 .sectionName { color: darkred; font-weight: 600; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>

附加文件

• 解構賦值

• localeCompare

Answer 2

首先你需要根據你的要求創建 json 然后你需要渲染數據，你可以看到下面的代碼，here you can see the live example

import React, { useEffect, useState } from "react";

export default function App() {

  const [arr, setArr] = useState([]);

  const data = [
    {
      category: "FOOD",
      name: "Canape Two",
      menuSections: [
        {
          name: "Package",
        },
      ],
    },
    {
      category: "FOOD",
      name: "Canape One",
      menuSections: [
        {
          name: "Package",
        },
      ],
    },
    {
      category: "DRINK",
      name: "Package One",
      menuSections: [
        {
          name: "Drink Packages",
        },
      ],
    },
  ];

  useEffect(() => {
    let newArr = [];
    let duplicates = [];
    let obj = {};
    const sortedData = data.sort((a, b) => a.name.localeCompare(b.name));
    sortedData.forEach((item) => {
      obj = {
        category: item.category,
        name: item.name,
      };
      item.menuSections.forEach((item1) => {
        if (!duplicates.includes(item1.name)) {
          duplicates.push(item1.name);
          obj = { ...obj, menuSection: item1.name };
        } else {
           obj = { ...obj, menuSection: "" };
        }
        newArr.push(obj);
      });
    });
    setArr(newArr);
  }, [])

  return (
    <div className="App">
      {arr.map((menu) => (
        <>
          <p>{menu.menuSection}</p>
          <p>-- {menu.name}</p>
        </>
      ))}
    </div>
  );
}