如何在我的IndexPage中得到getServerSideProps的结果？

Posted 2023-02-01

我觉得getServerSideProps没有被运行，我刚刚开始，不知道如何解决这个问题，试了几个小时，但还是从IndexPage控制台.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部署上可以完美运行，但在我最初开始头疼的codesandbox.io上就不行了。

答案

你必须使用一个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那么你就可以确保，当组件获取数据时，数据是存在的。