React不渲染第二张地图

Question

我正在尝试在地图功能中创建第二张地图。它显示了我的console.log，但未呈现任何内容。

这是我的对象：

  const sidebarItems = [
    {
      icon: DashboardIcon,
      name: 'DASHBOARD',
      path: '/dashboard',
    },
    {
      icon: TaskManagementIcon,
      name: 'TASK MANAGEMENT',
      path: '/task-management',
      subpages: [
        {
          icon: TaskManagementIcon,
          name: 'BOARD VIEW',
          path: 'task-management/board',
        },
        {
          icon: TaskManagementIcon,
          name: 'LIST VIEW',
          path: 'task-management/list',
        },
      ],
    }
  ];

然后这是我的react组件：

function Sidebar({ items, location }) {
  return (
    <div className="app-sidebar">
      <div className="app-sidebar-items">
        {items.map(item => {
          const path = `/app${item.path}`;
          if (path === location.pathname) {
            if (typeof item.subpages !== 'undefined') {
              item.subpages.map(i => {
                return <p>Foo</p>
              });
            }
          }

          return <p>Bar</p>
        })}
      </div>
    </div>
  );
}

上面的代码始终显示“ Bar”文本。奇怪的是，如果我执行console.log（i），它会向我显示子项...为什么不起作用？

谢谢：）