如何在我的 IndexPage 中获取 getServerSideProps 结果？答案

【问题标题】：How to get getServerSideProps results in my IndexPage?如何在我的 IndexPage 中获取 getServerSideProps 结果？
【发布时间】：2020-05-28 23:46:49
【问题描述】：

我认为 getServerSideProps 没有运行，我刚刚开始并且不知道如何解决这个问题，尝试了几个小时但仍然从 IndexPage console.log(props.data) 中获取未定义

export default function IndexPage(props) {
console.log(props.data.copyright);
    return (
        <>
         <div>{props.data.copyright}</div>
        </>
    )
}

export async function getServerSideProps() {
    const res = await fetch(" https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY");
    const data = await res.json();
    return { props: { data } };
}

已编辑：代码在本地机器和 vercel 部署上完美运行，但在我最初启动 /headache 的 codeandbox.io 上却不行

【问题讨论】：

什么是“仍然未定义”？你想要什么行为？这段代码做了什么？
尝试首先控制台记录 IndexPage 中的 props.data，并获取未定义而不是包含获取结果的对象
我在 youtube 上关注这个教程 youtu.be/…

标签： javascript fetch next.js

【解决方案1】：

您必须使用 React Hook，然后在其中调用函数。然后，您可以将响应存储在一个状态中

试试这样的：

import fetch from "isomorphic-unfetch";
import React, {useEffect} from "react"

    const IndexPage = props => {
      console.log(props.data);
      if(!props.data){
       return <div>Waiting for data...</div>
      }
      return <div>main page</div>;
    };

    export async function getServerSideProps() {
      const { API_URL } = process.env;
      console.log("inside fetch");
      const res = await fetch(`${API_URL}/movies`);

      const data = await res.json();

      return { props: { data } };
    }

    export default IndexPage;

否则，您可以使用 getStaticProps然后你可以确保，当组件获取数据时，数据就在那里..

【讨论】：

知道为什么，或者我能做些什么来解决它？
您没有调用该函数。你必须使用 React hook 或类似的......你可以使用 useEffecthook，在你的 IndexPage component
不太了解next.js，但也许你应该使用getStaticProps，查看文档You should use getServerSideProps only if you need to pre-render a page whose data must be fetched at request time.
那我认为是因为，数据可能还没有被获取？
你能edit你的答案而不是在 cmets 中添加补码吗？ ATM 这几乎不是答案