如何解决无法从 Strapi API 获取数据到 next.js 前端
我尝试过使用 Strapi 和 next.js 来制作博客网站。这是前端代码的next.js
import Head from 'next/head'
import styles from '../styles/Home.module.css'
export default function Home({ posts }) {
return (
<div>
{posts &&
posts.map((posts) => (
<div key={post.id}>
<h2>{posts.title}</h2>
</div>
))}
</div>
);
}
export async function getstaticProps() {
//get post from our API
const res = await fetch("http://localhost:1337/posts");
const posts = await res.json();
return {
props: { posts },};
}
这里是 Strapi API Json 数据
[
{
"id": 1,"title": "Hello Everyone","slug": "hello-everyone","content": "Hello All.","users_permissions_user": {
"id": 4,"username": "tanha","email": "tanha@test.com","provider": "local","confirmed": true,"blocked": false,"role": 1,"created_at": "2021-03-12T06:02:44.726Z","updated_at": "2021-03-12T06:03:54.507Z"
},"published_at": "2021-03-11T19:37:02.117Z","created_at": "2021-03-11T19:36:46.663Z","updated_at": "2021-03-12T11:48:57.275Z"
}
]
这里有什么问题?我尝试过,但在这里没有发现任何错误。但是无法获取数据到前端显示。
解决方法
如果您使用 Next.js 并希望充分利用静态渲染,我建议您尽可能避免使用 getStaticProps。
这是一个使用纯组件且完全没有道具的工作示例。
const Home = () => {
const [posts,setPosts] = React.useState(null);
const getPosts = async() => {
const res = await fetch("http://localhost:1337/posts");
const json = await res.json();
setPosts(json);
}
if(!posts){
getPosts();
}
return (
<div>
{posts ? posts.map((post) => (
<div key={post.title}>
<h2>{post.title}</h2>
</div>
)) : (
<div>Loading...</div>
)}
</div>
)
}
export default Home;
,
getstaticProps
应该是不同的情况 -> getStaticProps
,除了您的代码看起来不错。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。