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

Question

我收到 无法读取未定义的属性“ map ”在 next.js 中使用 getStaticProps 时 组件/特色posts.js 但如果我直接在 上使用它页面/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 文件中获取帖子并将它们作为 Prop 传递给 FeaturedPosts 组件。