next.js getStaticProps返回空数组

chhqkbe1 于 2023-03-08 发布在其他

关注(0)|答案(1)|浏览(184)

嗨我正在尝试用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 ？

next.js

来源：https://stackoverflow.com/questions/75663167/getstaticprops-return-an-empty-array

1条答案

按热度按时间

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。

赞(0）回复(0）举报 2023-03-08

我来回答

next.js getStaticProps返回空数组

1条答案

相关问题

热门标签

最新问答