如何在Next.js中將透過getServerSideProps非同步取得的資料傳遞給元件?
P粉511749537
P粉511749537 2023-09-11 23:13:27
0
1
533

感謝您參與問題!我還在學習中,可能需要您像對待一個5歲的孩子一樣向我解釋。

工作得很好的地方:

在我的主頁上,我正在從getServerSideProps獲取資料並進行映射。資料是從專案資料夾中的data.json中取得的。

匯出預設函數Homepage({ data }) { ... }

匯出非同步函數 getServerSideProps() { ... }

#主頁有映射函數1... 這對我來說工作得很好!

我想做什麼:

#現在,我想從名為ListComponent的元件內部存取getServerSideProps()取得的資料。

我想在映射函數2中再次使用原始資料。我希望這發生在ListComponent內部。

然後,ListComponent將被匯入到我的主頁中。

不起作用的地方:

#在ListComponent內部,我嘗試傳入與主頁上使用的相同數據,像這樣:

導出預設函數ListComponent({ data }) { ... }

但它沒有起作用。它顯示資料未定義,或無法讀取資料。為什麼會這樣呢?我如何將資料傳遞給ListComponent?

P粉511749537
P粉511749537

全部回覆(1)
P粉006847750

你只需要將資料當作props傳遞:

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

現在,你有了名為data的props:

export default function ListComponent({ data }) { 
  // 使用数据
}
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板