Bagaimana untuk menghantar data yang diperoleh secara tidak segerak melalui getServerSideProps kepada komponen dalam Next.js?

Question

Terima kasih kerana mengambil bahagian dalam soalan! Saya masih belajar dan mungkin memerlukan anda menerangkannya kepada saya seperti kanak-kanak berumur 5 tahun.

Tempat kerja yang bagus:

Di halaman utama saya, saya mendapat data daripada getServerSideProps dan memetakannya. Data diperoleh daripada data.json dalam folder projek.

Eksport fungsi lalai Halaman Utama({ data }) { ... }

Eksport fungsi tak segerak getServerSideProps() { ... }

Halaman utama mempunyai fungsi pemetaan 1... Ini berfungsi dengan baik untuk saya!

Apa yang saya nak buat:

Sekarang, saya mahu mengakses data yang diperolehi oleh getServerSideProps() dari dalam komponen yang dipanggil ListComponent.

Saya mahu menggunakan data asal semula dalam fungsi pemetaan 2. Saya mahu ini berlaku di dalam ListComponent.

Komponen Senarai kemudiannya akan diimport ke halaman utama saya.

Apa yang

tidak berkesan:

Di dalam ListComponent, saya cuba menghantar data yang sama yang saya gunakan di halaman utama, seperti ini:

Eksport fungsi lalai ListComponent({ data }) { ... }

Tetapi ia tidak berjaya. Ia mengatakan data tidak ditentukan atau data tidak boleh dibaca. Kenapa ini terjadi? Bagaimanakah saya menghantar data ke ListComponent?

Answer 1

Anda hanya perlu menghantar data sebagai prop:

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

Kini, anda mempunyai prop bernama data:

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