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

Я подписан на Учебник 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.info(`Show data fetched. Count: ${data.length}`);
  return {
    data: data
  };
};

export default Body;

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

Есть ли в вашем ответе API какие-либо ошибки?

rrk 25.02.2019 14:44

только что обнаружил еще одну ошибку в верхней части консоли, говорящую: «Fetch API не может загрузиться… Схема URL должна быть «http» или «https» для запроса CORS».

GoonGamja 25.02.2019 15:29
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
3
2
3 777
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

Ответ принят как подходящий

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

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

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

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

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

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

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

Вы можете помочь мне здесь? stackoverflow.com/questions/59644618/…

Maniraj Murugan 08.01.2020 12:32

Другие вопросы по теме