在 next.js 中使用 getStaticProps() 时获取未定义的数据

Question

在 components/featured-posts.js 中的 next.js 中使用 getStaticProps 时，我得到 Cannot read property 'map' of undefined 但如果我直接在pages/index.js 页面显示结果，有人知道它为什么这样做吗？

export async function getStaticProps(){
  const data = await fetch('http://localhost/newblog/newblogapi/posts')
  const posts=await data.json();
  return {
    props: { posts }, // will be passed to the page component as props
  }
}
const FeaturedPosts = ({posts}) => {
 
console.log(posts)

  return (
    <div className="album py-5 bg-light">
      <div className="container mt-5">
      { posts.map(post=>(
        <div key={post.id}>
        <h3>{post.title}</h3>
          </div>
      ))}
      </div>
    </div>

  );
}

export default FeaturedPosts;

Answer 1

您只能在页面（/pages 目录中的文件）上使用 getStaticProps，而不能在常规 React 组件中使用。我建议您在 pages/index.js 文件中获取帖子并将它们作为道具传递给 FeaturedPosts 组件。