英文:
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 = "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)
}
}
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 (
<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)
}
}
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?
答案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 <div>Games Component</div>;
}
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 "./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>
);
}
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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论