嗨我正在尝试用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 ?
1条答案
按热度按时间fnx2tebb1#
您没有将
data
属性传递给Games
组件。您声明游戏需要data
属性。文件:Next.JS/Data Fetching/getStaticProps
将组件剥离到最基本的部分,我们得到:
然后在页面中(组件呈现的地方),我们可以这样传递
data
:现在控制台日志按预期显示。
顺便说一句,我建议重新考虑TypeScript的实现。您可能希望删除类型声明,因为您还有一个内联类型声明。您也可以实现interface。