Reactjs 在next.js中使用getStaticProps（）时获取未定义的数据

在组件/featured posts.js内的next.js中使用getStaticProps时，无法读取未定义的属性“map”，但是如果我直接在页面/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;

导出异步函数getStaticProps（）{
常量数据=等待获取（'http://localhost/newblog/newblogapi/posts')
const posts=wait data.json（）；
返回{
props:{posts}，//将作为props传递给页面组件
}
}
const FeaturedPosts=（{posts}）=>{
控制台日志（posts）
返回(
{posts.map（post=>(
{post.title}
))}
);
}
导出默认功能部件；

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

同意。即使允许，在组件中获取数据也不是好的做法。组件应处理其实现，并将数据传递给它进行处理。