React - 如何在 map 數組中傳遞 object

Question

在我使用帶有對象的數組進行路由之前，我正在我的 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;

課程.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 object 中的names屬性是一個簡單的<span>標記。

但現在我使用不同的方法，而不是創建具有屬性的 object 我使用 map 它使我的工作更輕松

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

此代碼執行與舊代碼相同的邏輯。 但是我不能添加names屬性，我不知道怎么做，我試圖在一個數組中創建一個object

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

但是我收到一個錯誤 - 錯誤：對象作為 React 子項無效（找到：object 和鍵 {names}）。 如果您打算渲染一組子項，請改用數組。

我怎么解決這個問題？

Answer 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}`,
    };
  }
});