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

Question

我在我的localhost机器上设置了一个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变量。

或者mayber它应该是mod.show.id？

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

首先，你可以查看来自qazxsw poi的内容。

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。

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