React - 如何在地图数组中传递对象答案

【问题标题】：React - How to pass an object inside a map arrayReact - 如何在地图数组中传递对象
【发布时间】：2021-04-25 02:23:29
【问题描述】：

在我使用带有对象的数组进行路由之前，我正在我的 React 应用程序中创建一个侧边栏

SideBarItem.js

const SidebarItems = [
    {
        names: "General",
    },
    {
        name: "E-commerce",
        route: '/Maps',
    },
    {
        name: "Maps",
        route: '/Maps',
    },
    {
        names: "About",
    },
    {
        name: "Calendar",
        route: '/Calendar'
    },
];

export default SidebarItems;

Lesson.js

<ul>
    {SidebarItems.map((item, index) => {
        return (
            <>
                {item.names && (
                    <li className="header-menu">
                        <span>{item.names}</span>
                    </li>
                )}

                {item.name && (
                    <li>
                        <i className="fa fa-folder"></i>
                        <Link to={`${path}` + item.route}
                              className="link">{item.name}</Link>
                    </li>
                )}
            </>
        );
    })}
</ul>

我得到了这个带有链接和段落

的侧边栏

来自SidebarItems 对象的names 属性是一个简单的<span> 标记。

但现在我使用不同的方法而不是创建具有属性的对象，我使用 map 它使我的工作更轻松

const SidebarItems = ['Calendar', 'Messages', 'Notifications'].map((itemName) => ({
    name: itemName,
    route: `/${itemName}`
}));

此代码执行与旧代码相同的逻辑。但是我无法添加names属性，我不知道怎么做，我试图在数组中创建一个对象

const SidebarItems = ['Calendar', 'Messages', {names: "General"}, 'Notifications'].map((itemName) => ({
    name: itemName,
    names: itemName.names,
    route: `/${itemName}`
}));

但我收到一个错误 - 错误：对象作为 React 子项无效（找到：带有键 {names} 的对象）。如果您打算渲染一组子项，请改用数组。

我该如何解决这个问题？

【问题讨论】：

标签： javascript arrays reactjs object redux

【解决方案1】：

根据您正在循环的数组，这是您需要做的事情

const SidebarItems = [
  "Calendar",
  "Messages",
  { names: "General" },
  "Notifications",
].map((itemName) => {
  if (typeof itemName === "string") {
    return {
      name: itemName,
      names: itemName.names || "",
      route: `/${itemName}`,
    };
  } else {
    return {
      name: itemName.names,
      names: itemName.names,
      route: `/${itemName.names}`,
    };
  }
});

【讨论】：