如何在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 }) { 
  // 使用数据
}