如何在Next.js中将通过getServerSideProps异步获取的数据传递给组件？

Question

感谢您参与问题！我还在学习中，可能需要您像对待一个5岁的孩子一样向我解释。

工作得很好的地方：

在我的主页上，我正在从getServerSideProps获取数据并进行映射。数据是从项目文件夹中的data.json中获取的。

导出默认函数Homepage({ data }) { ... }

导出异步函数 getServerSideProps() { ... }

主页有映射函数1... 这对我来说工作得很好！

我想做什么：

现在，我想从名为ListComponent的组件内部访问getServerSideProps()获取的数据。

我想在映射函数2中再次使用原始数据。我希望这发生在ListComponent内部。

然后，ListComponent将被导入到我的主页中。

不起作用的地方：

在ListComponent内部，我尝试传入与主页上使用的相同数据，像这样：

导出默认函数ListComponent({ data }) { ... }

但它没有起作用。它显示数据未定义，或者无法读取数据。为什么会这样？我如何将数据传递给ListComponent？

Answer 1

你只需要将数据作为props传递：

export default function Homepage({ data }) {
  return (
   // ...
   <ListComponent data={data} />
   // ...
  )
}

现在，你有了名为data的props：

export default function ListComponent({ data }) { 
  // 使用数据
}