getStaticProps() 函数未将数据传递给组件

Question

我正在学习使用 nextjs，同时使用 nextjs.org 页面指南

我的问题，

就是这样。
我的 getStaticProps 函数似乎在 get static props 中正确获取数据并记录

但是当我发送数据（ with 是 props 对象）时，我似乎在组件内部收到（未定义）错误并加载数据

这是我的 getStaticProps 函数 allPostsData 变量正在获取数据并将其传递给

return keyword

中的 props

export async function getStaticProps() {
  const allPostsData = getSortedPostsData();
  console.log("getStaticProps>>>",allPostsData)

  return {
    props: {
      allPostsData,
    },
  };
}

这里的日志语句记录了正确的数据，女巫是这样的

getStaticProps>>> [
  {
    id: 'ssg-ssr',
    title: 'When to Use Static Generation v.s. Server-side Rendering',
    date: '2020-01-02'
  },
  {
    id: 'pre-rendering',
    title: 'Two Forms of Pre-rendering',
    date: '2020-01-01'
  }
]

但是当我像这样将 props （witch 是 allPostsData 对象）传递给 home 组件时

export default function Home ({allPostsData })  {
  console.log("getStaticProps>>>",allPostsData)
}

我未定义，就好像里面根本没有数据

我用

npm run dev 

启动服务器，尽管我不认为这是问题

尝试使用

.map method

显示数据时，它什么也没显示

下面的例子

 {allPostsData && allPostsData.map
(({ id, date, title }) => 
({title }
 {date}
 {id}))}

Answer 1

这是因为 getStaticProps 在 Next.js 中是异步的，所以需要添加await关键字。您的控制台日志可能会显示预期值，因为承诺已解决并且此时数据可用。但是，当您将 allPostsData 作为 prop 传递给 Home 组件时，如果您不使用等待，数据将作为待处理的 Promise 传递，因此它尚不可用，需要在渲染其余部分之前等待。

export async function getStaticProps() {
  const allPostsData = await getSortedPostsData();
  console.log("getStaticProps>>>",allPostsData)

  return {
    props: {
      allPostsData,
    },
  };
}