React不渲染第二个贴图

Question

我正在尝试在map函数中做第二个map。它显示了我的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)，它会向我显示子项...为什么不动呢？

谢谢:)

Answer 1

您忘记了return子页面映射。如果没有该返回，函数将继续执行，直到到达return <p>Bar</p>，所以这就是您将看到的所有内容。

JSX只是带有一些语法糖的纯javascript。渲染JSX只会在返回时执行任何操作。

    items.map(item => {
      const path = `/app${item.path}`;
      if (path === location.pathname) {
        if (typeof item.subpages !== 'undefined') {
          return item.subpages.map(i => {
          // ^ added
            return <p>Foo</p>
          });
        }
      }

      return <p>Bar</p>
    })