Maison  >  Questions et réponses  >  le corps du texte

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

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 ?

P粉511749537P粉511749537426 Il y a quelques jours513

répondre à tous(1)je répondrai

  • P粉006847750

    P粉0068477502023-09-12 10:42:39

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

    répondre
    0
  • Annulerrépondre