Next.js 中的 getInitialProps 不会从服务器获取数据答案

【问题标题】：getInitialProps in Next.js does not get data from serverNext.js 中的 getInitialProps 不会从服务器获取数据
【发布时间】：2019-07-18 22:29:24
【问题描述】：

我关注Next.js tutorial for fetching data

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

【问题讨论】：

您的 API 响应是否有任何错误？
刚刚在控制台顶部发现另一个错误，提示“Fetch API 无法加载.....对于 CORS 请求，URL 方案必须是“http”或“https”。”

标签： javascript reactjs axios next.js

【解决方案1】：

我已经解决了这个问题。

因为我违反了一条简单的规则。

据next.js document，有一条说明说

注意：getInitialProps 不能用于子组件。仅限pages。

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

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

那是个问题。

【讨论】：

你能帮我吗？ stackoverflow.com/questions/59644618/…

【解决方案2】：

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

【讨论】：