如何 map 包含部分的列表

Question

我有這個數據數組，我試圖用部分列出它們，已經知道如何使用 .map 列出數組，但未能列出其部分下的每個列表項，而是我不得不使用 .map 與每個部分。

第 1 節數據（儀表板）：

const DashboardListItems = [
    {
      name: "Home",
      to: "/",
      icon: LineStyleIcon
    },
    {
      name: "Analytics",
      to: "/analytics",
      icon: TimelineIcon
    },
  ];

第 2 節數據（快捷菜單）：

const QuickMenuListItems = [
    {
      name: "Users",
      to: "/users",
      icon: PermIdentityIcon
    },

    {
      name: "Posts",
      to: "/posts",
      icon: AssignmentIcon
    },

    {
      name: "Coupons",
      to: "/coupons",
      icon: DiscountIcon
    },

    {
      name: "Shops",
      to: "/shops",
      icon: StoreIcon
    },

    {
      name: "Products",
      to: "/products",
      icon: StorefrontIcon
    },

    {
      name: "Transactions",
      to: "/transactions",
      icon: AttachMoneyIcon
    },

    {
      name: "Reports",
      to: "/reports",
      icon: BarChartIcon
    },
  ];

代碼：

    <div className="sidebarMenu">
      <h3 className="sidebarTitle">Dashboard</h3>
      <ul className="sidebarList">
        {DashboardListItems.map((dashboardListItems, index) => {
          const Icon = dashboardListItems.icon;
        return (
          <Link to={dashboardListItems.to} className="link">
          <li
            onClick={() => setActiveIndex(index)}
            className={`sidebarListItem ${
              index === activeIndex ? "active" : ""}`}>
            <Icon className="sidebarIcon"/>
            {dashboardListItems.name}
          </li>
          </Link>
        );
        })}
      </ul>
    </div>

我不得不在另一部分使用它兩次，問題是如何避免這種情況？

Answer 1

讓我來幫你：

1. 如果要在網頁上顯示數據，則必須使用 map 迭代這兩個變量，因為如果使用 forEach 可以迭代數據但沒有任何返回，因此不使用 map 無法顯示。

2. 我認為執行此操作的正確方法是使用組件或 function，您可以在其中選擇數據的屬性並對其進行處理，但無論如何您都需要執行兩個循環以傳遞存儲在 QuickMenuList 和 DashboardListItems 中的數據。

   function processElement({name, to, icon}){ //處理數據 }

處理這個問題的另一種方法是將兩個變量聲明為一個變量，而不是聲明 2 個變量中的數據只使用一個，它們具有相同的屬性。

我希望它能幫助你:)