我试图用nextjs和axios从jsonplaceholder中获取一个帖子列表。
这是我的ListOfPosts.jsx
import Link from "next/link";
import axios from "axios";
export default function ListOfPosts({posts}) {
return(
<div>
{posts.map(post => (
<div key={post.id}>
<Link href={`/posts/${post.id}`}>{post.body}</Link>
</div>
))}
</div>
)
}
export const getStaticProps = async () => {
const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
console.log(response.data);
const posts = response.data;
return {
props: {
posts
}
}
}
字符串
这是我的posts/page.jsx
import ListOfPosts from "./ListOfPosts";
export default async function PostsPage({posts}) {
return (
<>
<section>
<ListOfPosts posts={posts}/>
</section>
</>
)
}
型
我得到的错误是ListOfPosts.jsx中的cannot read properties of undefined (reading 'map')
我做错了什么,当试图获取职位与axios?
2条答案
按热度按时间esbemjvw1#
您不需要
/app
目录中的getStaticProps
函数。字符串
更多阅读:
9udxz4iz2#
getStaticProps只在页面上运行。
getStaticProps只能从页面导出。不能从非页面文件、_app、_document或_error导出。
这种限制的原因之一是React需要在页面呈现之前拥有所有必需的数据。
你可以在
PostsPage
中使用它,并将它作为prop传递给ListOfPosts
。如果它在app目录中,则这些服务器端函数不会在
app
目录中运行。它只在pages
目录下运行。