Comment transmettre les données obtenues de manière asynchrone via getServerSideProps à un composant dans Next.js ?

Question

Merci d'avoir participé à la question ! J'apprends encore et j'aurai peut-être besoin que vous me l'expliquiez comme un enfant de 5 ans.

Excellent endroit pour travailler :

Sur ma page d'accueil, je récupère les données de getServerSideProps et je les mappe. Les données sont obtenues à partir de data.json dans le dossier du projet.

Exporter la fonction par défaut Homepage({ data }) { ... }

Exporter la fonction asynchrone getServerSideProps() { ... }

La page d'accueil a la fonction de cartographie 1... Cela fonctionne bien pour moi !

Qu'est-ce que je veux faire :

Maintenant, je souhaite accéder aux données obtenues par getServerSideProps() depuis l'intérieur du composant appelé ListComponent.

Je souhaite réutiliser les données d'origine dans la fonction de cartographie 2. Je veux que cela se produise dans le ListComponent.

Le ListComponent sera ensuite importé dans ma page d'accueil.

Ce qui ne marche pas :

Dans le ListComponent, j'ai essayé de transmettre les mêmes données que celles que j'utilise sur la page d'accueil, comme ceci :

Exportez la fonction par défaut ListComponent({ data }) { ... }

Mais ça n’a pas fonctionné. Il indique que les données ne sont pas définies ou que les données ne peuvent pas être lues. Pourquoi cela arrive-t-il? Comment transmettre des données à ListComponent ?

Answer 1

Il vous suffit de transmettre les données comme accessoires :

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

Maintenant, vous avez des accessoires nommés data :

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