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

g6baxovj  于 2023-02-15  发布在  其他
关注(0)|答案(1)|浏览(148)

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

    • 哪些方面运行良好:**

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

    • 我想做的事:**

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

    • 什么行不通**

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

ufj5ltwl

ufj5ltwl1#

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

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

现在,您有了作为data属性的数据:

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

相关问题