Блог

Я настраиваю приложение 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>
  

Есть идеи?

Я думаю, у вас опечатка

 ...
<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 .

Есть несколько лучших способов отладки, чтобы узнать, что происходит, но этот способ является хорошим и более заметным.