getInitialProps в Next.js не получает данные с сервера - PullRequest
Новая
       20

getInitialProps в Next.js не получает данные с сервера

0 голосов
/ 25 февраля 2019

Я следую Next.js учебнику по извлечению данных

Но в отличие от учебника я использую axios.Проблема в том, что getInitialProps не получает данные, которые я хочу иметь.

вот код: 

import axios from "axios";
import Link from "next/link";

const Body = props => (
  <div>
    <h1>Shows</h1>
    <ul>
      {props.data.map(({ show }) => (
        <li key={show.id}>
          <Link as={`/p/${show.id}`} href={`/post?title=${show.title}`}>
            <a>{show.name}</a>
          </Link>
        </li>
      ))}
    </ul>
  </div>
);

Body.getInitialProps = async function() {
  const res = await axios.get("https://api.tvmaze.com/search/shows?q=batman");
  const data = await res.data;
  console.log(`Show data fetched. Count: ${data.length}`);
  return {
    data: data
  };
};

export default Body;

Мне кажется, что код в порядке, но ошибка Unhandled Rejection (TypeError): Cannot read property 'map' of undefined продолжает возникать.

Ответы [ 2 ]

0 голосов
/ 26 февраля 2019

Я решил проблему.

Это произошло потому, что я нарушил простое правило.

Согласно документу next.js , есть примечание, в котором говорится

Примечание: getInitialProps нельзя использовать в дочерних компонентах.Только в pages.

Поэтому, когда я получаю эти данные на index.js, он успешно получает данные, которые я хочу иметь.

Я думал, что могу использовать getInitialProps влюбые компоненты, такие как componentDidMount.

Это была проблема.

0 голосов
/ 25 февраля 2019

Возможно, я ошибаюсь, и если да, скажите мне, и я удалю свой ответ, но я думаю, что это потому, что у вас нет значения по умолчанию для этого реквизита, и метод, который получает данные, вызывается не сразу, поэтомуесть момент, когда ваша опора undefined и вы звоните map на неопределенную опору.

...