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



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Я могу ошибаться, и если я ошибаюсь, скажите мне, и я удалю свой ответ, но я думаю, это потому, что у вас нет значения по умолчанию для этой опоры, и метод, который получает данные, не вызывается немедленно, поэтому есть момент, когда ваша опора undefined, и вы вызываете map неопределенную опору.
Я решил проблему.
Это произошло потому, что я нарушил простое правило.
Согласно документ next.js, есть примечание о том, что
Примечание: getInitialProps нельзя использовать в дочерних компонентах. Только в pages.
Поэтому, когда я получаю эти данные в index.js, они успешно получают данные, которые я хочу иметь.
Я подумал, что могу использовать getInitialProps в любых компонентах, как componentDidMount.
Это было проблемой.
Вы можете помочь мне здесь? stackoverflow.com/questions/59644618/…
Есть ли в вашем ответе API какие-либо ошибки?