NextJs – 映射链接数组会导致错误答案

【问题标题】：NextJs – Mapping an array of links causes bugsNextJs – 映射链接数组会导致错误
【发布时间】：2020-06-17 08:26:56
【问题描述】：

我有一个包含菜单链接数据的站点配置

//config.js

  menu: [
    {
      title: "Home",
      href: "/",
    },
    {
      title: "About",
      href: "/about/",
    },
  ]

将此数组映射到如下组件中会导致开发模式下的一些错误。

//menu.jsx

  const renderMenuItems = (linkData) => {
    return map(linkData, (l) => {
      return (
        <Link key={l.href} as={l.href} href={l.href}>
          <a>{l.title}</a>
        </Link>
      );
    });
  };

我注意到在访问其中一个映射位置时刷新会导致页面变为 404。字体也未加载。这是什么原因造成的？

【问题讨论】：

你能展示你的路由器组件吗？
@RedBaron 页面和路由由 NextJs 使用 "pages" folder structure 自动生成

标签： javascript reactjs next.js

【解决方案1】：

检查一下它可能会起作用

const renderMenuItems = linkData => {
  return (
    <>
      {linkData.map( l => {
        return (
          <Link key={l.href} as={l.href} href={l.href}>
            <a>{l.title}</a>
          </Link>
        )
      })}
    </>
  )
}

【讨论】：

不幸的是，没有运气。
如果linkData是一个数组，你应该使用linkData.map()。我修好了。
谢谢。我试过了。不幸的是，它并不能解决问题。

【解决方案2】：

首先，就像neil-morgan说的，你应该看看array map documentation

然后，我认为您的 linkData 道具可能在初始组件渲染时未定义。

添加这个：

{linkData && linkData.map( l => {...})}

您可以通过 defaultProps 的 init props 避免这种情况

renderMenuItems.defaultProps = {
     linkData : []
}

此外，您还可以定义 propsTypes，如下所示：

renderMenuItems.propTypes = {
   linkData : PropTypes.arrayOf(PropTypes.shape({
       title: PropTypes.string.isRequired,
       href: PropTypes.string.isRequired,
    })),

如果您使用的是 TypeScript，也可以使用 props 接口

【讨论】：