Next.js 中的 getInitialProps 没有从服务器获取数据

Question

但与教程不同，我使用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 不断出现。

Answer 1

我可能错了，如果我错了，请告诉我，我会删除我的答案，但我认为这是因为您没有该道具的默认值，并且未调用获取数据的方法立即，所以有那么一刻你的道具是 undefined 而你正在调用 map 一个未定义的道具。

Answer 2

我已经解决了这个问题。

这是因为我违反了一个简单的规则。

根据next.js document，有一个注释说

注意：getInitialProps不能在子组件中使用。仅在 pages.

所以当我在 index.js 获取数据时，它成功地获取了我想要的数据。

以为我可以在任何组件中使用 getInitialProps，就像 componentDidMount 一样。

这是个问题。

Next.js 中的 getInitialProps 没有从服务器获取数据

getInitialProps in Next.js does not get data from server

javascript

reactjs

axios

next.js