开发者问题收集

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

2019-04-14
2966
reactjs next.js

我正在本地主机上设置 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>

有什么想法吗？

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 。

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

Vencovsky
2019-04-14