如何用section映射列表

Question

我有这个数据数组，我试图用部分列出它们，已经知道如何使用。map列出数组，但未能列出它的部分下的每个列表项，而不是我不得不使用。map与每个部分。

Section 1 Data (Dashboard):

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

Section 2 Data (QuickMenu):

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. 我认为执行此操作的正确方法是使用组件或函数，您可以在其中选择数据的道具并处理它，但在任何情况下，您都需要执行两个循环来传递存储在QuickMenuList和DashboardListItems中的数据。

   函数proceselement ({name, to, icon}){//处理数据}

另一种处理方法是将两个变量声明为一个，而不是将两个变量中的数据声明为一个，它们具有相同的props

我希望它能帮助你:)