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

g6baxovj 于 2023-02-15 发布在其他

关注(0)|答案(1)|浏览(149)

谢谢你突然提出这个问题!我还在学习中，可能需要你像5岁小孩一样给我解释。

在我的主页上，我从getServerSideProps获取数据并Map它，数据是从project文件夹中的data.json获取的。
导出默认函数主页（{data}）{...}
导出异步函数getServerSideProps（）{...}
主页有1号Map功能...这对我来说工作得很好!

现在，我想从名为ListComponent的组件内部访问getServerSideProps（）获取的数据。
我希望能够在Map函数2中再次使用原始数据。我希望这在ListComponent内部发生。
然后将ListComponent导入到我的主页中。

在ListComponent内部，我尝试传入在主页上使用的相同数据，如下所示：
导出默认函数ListComponent（{data}）{...}
不起作用。它说数据未定义，或者数据无法读取。这是为什么？我如何将数据传递给ListComponent？

1条答案

您只需要将数据作为 prop 传递：

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

现在，您有了作为data属性的数据：

export default function ListComponent({ data }) { 
  // play with data
}