如何修复 NextJS 中的“TypeError：无法读取未定义的属性“id”错误？

Question

我正在我的本地主机上设置一个 NextJS 应用程序，并按照网站上的精彩教程进行操作，但是在插入我的本地 API 时我遇到了问题。

更改 JS 代码时出现错误。错误是

  TypeError: Cannot read property 'id' of undefined
   (anonymous function)
   /Users/mattcohen/hello-
next/.next/server/static/development/pages/index.js:1611:17

这是我对 api 的声明：

Index.getInitialProps = async function() {
  const res = await fetch('http://localhost:8888/api/mods')
  const data = await res.json()

  console.log(`Show data fetched. Count: ${data.length}`)

  return {
    mods: data.mods.map(entry => entry.show)
  }
}

export default Index

这是我的页面布局代码

import Layout from '../components/MyLayout.js'
import Link from 'next/link'
import fetch from 'isomorphic-unfetch'

const Index = (props) => (
  <Layout>
    <h1>Batman TV Shows</h1>
    <ul>
      {props.mods.map(mod => (
        <li key={mod.id}>
          <Link as={`/p/${show.id}`} href={`/post?id=${mod.id}`}>
            <a>{mod.brand_name}</a>
          </Link>
        </li>
      ))}
    </ul>

有什么想法吗？

Answer 1

我觉得你写错了

...
<ul>
  {props.mods.map(mod => (
    <li key={mod.id}>
      //              here
      <Link as={`/p/${show.id}`} href={`/post?id=${mod.id}`}>
        <a>{mod.brand_name}</a>
      </Link>
    </li>
  ))}
</ul>

不应该是 mod.id 而不是 show.id 吗？没有show 变量。

或者应该是mod.show.id？

编辑：调试它以了解错误是什么

首先，您可以检查来自props 的内容。

const Index = (props) => (
  <Layout>
    <h1>Batman TV Shows</h1>
    <p>{JSON.stringfy(props, null, 2)}</p>
    <ul>
      {props.mods.map(mod => (
        <li key={mod.id}>
          <Link as={`/p/${show.id}`} href={`/post?id=${mod.id}`}>
            <a>{mod.brand_name}</a>
          </Link>
        </li>
      ))}
    </ul>
)

通过这种方式，您将看到正在进入您的组件的所有内容。在那里您可以查看您要显示的数据mod.id 是否在mods.map(mod => ) 中。但更具体地说，你可以这样做

const Index = (props) => (
  <Layout>
    <h1>Batman TV Shows</h1>
    <ul>
      {props.mods.map((mod, i) => (
        <li key={i}>
          <p>{JSON.stringify(mod, null, 2)}</p>
        </li>
      ))}
    </ul>
)

这样你就可以准确地看到mods里面有什么，看看是否有属性id。

有一些更好的方法可以调试它以了解发生了什么，但这种方法更好更明显。