在 NextJs "banner.map is not a function" 中调用 api 请求时收到错误

Question

所以我遵循了一个相当简单的教程，只是展示了如何从API请求数据并显示它。但是当我去查看我的项目NextJs的页面返回和错误"横幅。Map不是函数"我已经把我的代码下面任何帮助将非常感激。API调用是"https://fortnite-api.com/v1/banners"它返回一个对象数组。

export const getStaticProps = async () => {
const res = await fetch('https://fortnite-api.com/v1/banners');
const data = await res.json();
return {
props: { banners: data}
}
}
const FortniteApi = ({ banners }) => {
return (
<div>
<h1>Fortnite Api</h1>
{banners.map(banner => (
<div key={banner.id}>
<a>
<h3>{banner.name}</h3>
</a>
</div>
))}
</div>
)
}
export default FortniteApi

Answer 1

您需要访问内部的另一个对象data:

return {
props: { banners: data },
};

return {
props: { banners: data.data },
};