NextJs - 映射一个数组的链接会导致错误

Question

我有一个网站配置，其中包含我的菜单链接的数据。

//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。字体也没有被加载。是什么原因造成的？

Answer 1

检查这个，它可能会工作

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

Answer 2

首先，像 霓虹灯 说，你应该看看 阵列图文档

那么，我想你的linkData props可能在初始组件渲染时未定义。

添加这个。

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

你可以通过使用以下方式来避免这种情况的发生 defaultProps

renderMenuItems.defaultProps = {
     linkData : []
}

此外，你还可以像下面这样定义propsTypes。

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

如果你使用TypeScript，也可以用props接口来定义。