首页  >  问答  >  正文

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

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

工作得很好的地方:

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

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

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

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

我想做什么:

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

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

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

不起作用的地方:

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

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

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

P粉511749537P粉511749537426 天前509

全部回复(1)我来回复

  • P粉006847750

    P粉0068477502023-09-12 10:42:39

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

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

    现在,你有了名为data的props:

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

    回复
    0
  • 取消回复