How to fix 'TypeError: Cannot read property 'id' of undefined' error in NextJS?

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.

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

How to fix 'TypeError: Cannot read property 'id' of undefined' error in NextJS?

How to fix 'TypeError: Cannot read property 'id' of undefined' error in NextJS?

reactjs

next.js