Wie übergebe ich asynchron über getServerSideProps erhaltene Daten an eine Komponente in Next.js?

Question

Vielen Dank für Ihre Teilnahme an der Frage! Ich lerne immer noch und muss es mir vielleicht wie einem 5-Jährigen erklären.

Toller Arbeitsplatz:

Auf meiner Homepage erhalte ich die Daten von getServerSideProps und ordne sie zu. Die Daten werden von data.json im Projektordner abgerufen.

Exportieren Sie die Standardfunktion Homepage({ data }) { ... }

Asynchrone Funktion getServerSideProps() { ... } exportieren

Homepage hat Mapping-Funktion 1... Das funktioniert bei mir gut!

Was möchte ich tun:

Jetzt möchte ich innerhalb der Komponente namens ListComponent auf die von getServerSideProps() erhaltenen Daten zugreifen.

Ich möchte die Originaldaten in Mapping-Funktion 2 wieder verwenden. Ich möchte, dass dies innerhalb der ListComponent geschieht.

Die ListComponent wird dann in meine Homepage importiert.

Was nicht funktioniert:

Innerhalb der ListComponent habe ich versucht, dieselben Daten zu übergeben, die ich auf der Startseite verwende, etwa so:

Exportieren Sie die Standardfunktion ListComponent({ data }) { ... }

Aber es hat nicht funktioniert. Es heißt, dass die Daten undefiniert sind oder nicht gelesen werden können. Warum passiert das? Wie übergebe ich Daten an ListComponent?

Answer 1

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

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

现在，你有了名为data的props：

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