getStaticProps 返回一个空数组

huangapple go评论65阅读模式
英文:

getStaticProps return an empty array

问题

以下是您要翻译的部分:

"hi i'm trying to do a twitch clone with Nextjs,

i'm trying to fetch the twith api with what NextJs offer: getStaticProps so i wrote a code like this but it doesn't work, it return me an empty array and i don't understand why

here is my code :

type Props = {};

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

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

export async function getStaticProps() {

try {
    const url: string = &quot;https://api.twitch.tv/helix/games/top&quot;";
    const resp = await api.get(url);
    const data = await resp?.data;

    return {
        props: {
            data:data
        }
    }
}
catch(error){
    console.log(error)
}

}

the api variable is code like that :

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

when i try with post man with the same url, client-id and bearer i got a response 200 with all of the top games so why it doesn't work with get static props?"

英文:

hi i'm trying to do a twitch clone with Nextjs,

i'm trying to fetch the twith api with what NextJs offer: getStaticProps so i wrote a code like this but it doesn't work, it return me an empty array and i don't understand why

here is my code :

type Props = {};

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

  return (
    &lt;div&gt;
    &lt;/div&gt;
);
}

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

the api variable is code like that :

import axios from &#39;axios&#39;

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

export default api

when i try with post man with the same url, client-id and bearer i got a response 200 with all of the top games so why it doesn't work with get static props?

答案1

得分: 1

您没有将data属性传递给Games组件。您声明了Games应该需要一个data属性。

文档链接: Next.JS/Data Fetching/getStaticProps

将组件简化如下:

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

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

然后,在页面中(渲染组件的页面)可以这样传递data

import Games from "./games";

export default function Page() {
  // 模拟API响应
  const responseData = [{ game1: "游戏1" }, { game2: "另一个游戏" }];

  return (
    <div>
      <h1>页面</h1>
      // 将`data`传递给`Games`
      <Games data={responseData} />
    </div>
  );
}

现在控制台日志应该按预期显示。

另外,我建议重新考虑TypeScript的实现。您可能希望删除类型声明,因为您还有内联类型声明。您还可以实现一个接口

英文:

You are not passing the data prop to the Games component. You are declaring that Games should require a data prop.

Documentation: Next.JS/Data Fetching/getStaticProps

Stripping the component down to bare bones, we get:

export default function Games({ data }) {
  console.log(data);
  return &lt;div&gt;Games Component&lt;/div&gt;;
}

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

Then in a page (where the component is rendered), we can pass data as such:

import Games from &quot;./games&quot;;

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

  return (
    &lt;div&gt;
      &lt;h1&gt;Page&lt;/h1&gt;
// passing `data` to `Games`
      &lt;Games data={responseData} /&gt;
    &lt;/div&gt;
  );
}

Now the console log appears as expected.

As an aside, I'd recommend rethinking the TypeScript implementation. You may want to remove the type declaration, since you also have an inline type declaration. You could also implement an interface, instead.

huangapple
  • 本文由 发表于 2023年3月7日 22:19:11
  • 转载请务必保留本文链接:https://go.coder-hub.com/75663167.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定