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。

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

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

1 个答案: