Javascript 从对象数组中动态填充React中的引导侧栏下拉菜单

大家好，我正在尝试在React from a array of Object中动态填充一个引导侧栏下拉菜单。侧边栏中的每个按钮都有自己的下拉列表和链接。我能够渲染标题、链接和图标，但我很难让下拉菜单与对象数组中的动态填充一起工作

menu.options.js

 const menu = [
      {
        title: "Home",
        link: "/link1",
        icon: "fa fa-home",
        permissions: ["Admin", "Sub Admin"]
      },
      {
        title: "Appointments",
        link: "/link2",
        icon: "fa fa-edit",
        permissions: ["Admin", "Sub Admin"],
        submenu: [
          {
            title: "SubMenu 1",
            link: "/submenu",
            icon: "fa fa-pencil",
            permissions: ["Admin"]
          },
          {
            title: "SubMenu 2",
            link: "/submenu2",
            icon: "fa fa-pencil-dark",
            permissions: ["Sub Admin"]
          }
        ]
      },
      {
        title: "Clients",
        link: "/link3",
        icon: "fa fa-users",
        permissions: ["Admin", "Sub Admin"],
        submenu: [
          {
            title: "SubMenu 1",
            link: "/submenu",
            icon: "fa fa-pencil",
            permissions: ["Admin"]
          },
          {
            title: "SubMenu 2",
            link: "/submenu2",
            icon: "fa fa-pencil-dark",
            permissions: ["Sub Admin"]
          }
        ]
      },
      {
        title: "Reports",
        link: "/link4",
        icon: "fa fa-dashboard",
        permissions: ["Admin", "Sub Admin"],
        submenu: [
          {
            title: "SubMenu 1",
            link: "/submenu",
            icon: "fa fa-book",
            permissions: ["Admin"]
          },
          {
            title: "SubMenu 2",
            link: "/submenu2",
            icon: "fa fa-pencil-dark",
            permissions: ["Sub Admin"]
          }
        ]
      },
      {
        title: "Retail",
        link: "/link5",
        icon: "fa fa-briefcase",
        permissions: ["Admin", "Sub Admin"],
        submenu: [
          {
            title: "SubMenu 1",
            link: "/submenu",
            icon: "fa fa-pencil",
            permissions: ["Admin"]
          },
          {
            title: "SubMenu 2",
            link: "/submenu2",
            icon: "fa fa-pencil-dark",
            permissions: ["Sub Admin"]
          }
        ]
      }
    ];
    
    export default menu;



**Sidebar.js**

import React from "react";
import restorelogo from "./restoreblue.png";
import menu from "./menu.options";
import ROLES from "../../../../common/constants/index";

const Sidebar = () => {
  return (
    <div className="bg-light border-right test__sidebar" id="sidebar-wrapper">
      <div className="sidebar-heading">
        <a href="#">
          <img className="img-responsive" src={restorelogo} alt="logo" />
        </a>
      </div>
      {menu.map((item, idx) => (
        <div key={idx} className="menuItems">
          <div className="list-group list-group-flush">
            <a
              href={item.link}
              className="list-group-item list-group-item-action bg-light dropdown-toggle"
              data-toggle="collapse">
              <i className={item.icon}></i>
              {item.title}
            </a>

            <ul className="collapse list-unstyled list-group-item list-group-item-action bg-light">
              <li>
                <a href="#">Page 1</a>
              </li>
              <li>
                <a href="#">Page 2</a>
              </li>
              <li>
                <a href="#">Page 3</a>
              </li>
            </ul>
          </div>
        </div>
      ))}
    </div>
  );
};

export default React.memo(Sidebar);

const菜单=[
{
标题：“家”，
链接：“/link1”，
图标：“fa fa home”，
权限：[“管理员”、“子管理员”]
},
{
标题：“任命”，
链接：“/link2”，
图标：“fa编辑”，
权限：[“管理员”、“子管理员”]，
子菜单：[
{
标题：“子菜单1”，
链接：“/子菜单”，
图标：“发发铅笔”，
权限：[“管理员”]
},
{
标题：“子菜单2”，
链接：“/子菜单2”，
图标：“发发铅笔黑”，
权限：[“子管理员”]
}
]
},
{
标题：“客户”，
链接：“/link3”，
图标：“fa用户”，
权限：[“管理员”、“子管理员”]，
子菜单：[
{
标题：“子菜单1”，
链接：“/子菜单”，
图标：“发发铅笔”，
权限：[“管理员”]
},
{
标题：“子菜单2”，
链接：“/子菜单2”，
图标：“发发铅笔黑”，
权限：[“子管理员”]
}
]
},
{
标题：“报告”，
链接：“/link4”，
图标：“fa-fa仪表板”，
权限：[“管理员”、“子管理员”]，
子菜单：[
{
标题：“子菜单1”，
链接：“/子菜单”，
图标：“法法书”，
权限：[“管理员”]
},
{
标题：“子菜单2”，
链接：“/子菜单2”，
图标：“发发铅笔黑”，
权限：[“子管理员”]
}
]
},
{
标题：“零售业”，
链接：“/link5”，
图标：“fa fa公文包”，
权限：[“管理员”、“子管理员”]，
子菜单：[
{
标题：“子菜单1”，
链接：“/子菜单”，
图标：“发发铅笔”，
权限：[“管理员”]
},
{
标题：“子菜单2”，
链接：“/子菜单2”，
图标：“发发铅笔黑”，
权限：[“子管理员”]
}
]
}
];
导出默认菜单；
**Sidebar.js**
从“React”导入React；
从“/restoreblue.png”导入restorelogo；
从“/menu.options”导入菜单；
从“../../../../common/constants/index”导入角色；
常量边栏=（）=>{
返回(
{menu.map（（项目，idx）=>(








))}
);
};
导出默认的React.memo（侧栏）；