next.js getStaticProps返回空数组

chhqkbe1  于 2023-03-08  发布在  其他
关注(0)|答案(1)|浏览(183)

嗨我正在尝试用Nextjs做一个twitch克隆,
我正在尝试使用NextJ提供的API获取twith API:getStaticProps所以我写了一个这样的代码,但它不工作,它返回给我一个空数组,我不明白为什么
下面是我代码:

type Props = {};

function Games({}: Props, props:any) {
console.log(props)

  return (
    <div>
    </div>
);
}

    export async function getStaticProps() {
        
        try {
            const url: string = "https://api.twitch.tv/helix/games/top";
            const resp = await api.get(url);
            const data = await resp?.data;
    
            return {
                props: {
                    data:data
                }
            }
        }
        catch(error){
            console.log(error)
        }
    }

API变量编码如下:

import axios from 'axios'

let api = axios.create({
    headers:{
        'Client-ID': process.env.TWITCH_API_KEY,
        'Authorization' :`Bearer ${process.env.TWITCH_BEARER}`
    }
})

export default api

当我用同样的网址,客户端id和载体尝试与 Postman 我得到了一个响应200与所有的顶级游戏,那么为什么它不工作与获得静态 prop ?

fnx2tebb

fnx2tebb1#

您没有将data属性传递Games组件。您声明游戏需要data属性。
文件:Next.JS/Data Fetching/getStaticProps
将组件剥离到最基本的部分,我们得到:

export default function Games({ data }) {
  console.log(data);
  return <div>Games Component</div>;
}

export async function getStaticProps() {
  const data = res;
  return {
    props: {
      data: data,
    },
  };
}

然后在页面中(组件呈现的地方),我们可以这样传递data

import Games from "./games";

export default function Page() {
  //mocked API response
  const responseData = [{ game1: "A Game" }, { game2: "Another Game" }];

  return (
    <div>
      <h1>Page</h1>
// passing `data` to `Games`
      <Games data={responseData} />
    </div>
  );
}

现在控制台日志按预期显示。
顺便说一句,我建议重新考虑TypeScript的实现。您可能希望删除类型声明,因为您还有一个内联类型声明。您也可以实现interface

相关问题