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

Posted 2023-02-22

【中文标题】Next.js 中的 getInitialProps 不会从服务器获取数据

【英文标题】：getInitialProps in Next.js does not get data from server

【发布时间】：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”。”

【参考方案1】：

我已经解决了这个问题。

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

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

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

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

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

那是个问题。

【讨论】：

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

【参考方案2】：

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