v19.2Latest

Rendu de listes

Vous aurez souvent besoin d'afficher plusieurs composants similaires à partir d'une collection de données. Vous pouvez utiliser lesméthodes de tableau JavaScriptpour manipuler un tableau de données. Sur cette page, vous utiliserezfilter()etmap()avec React pour filtrer et transformer votre tableau de données en un tableau de composants.

Vous allez apprendre
  • Comment rendre des composants à partir d'un tableau en utilisant lemap() de JavaScript
  • Comment rendre uniquement des composants spécifiques en utilisant lefilter() de JavaScript
  • Quand et pourquoi utiliser les clés React

Rendu de données à partir de tableaux

Imaginons que vous ayez une liste de contenu.

La seule différence entre ces éléments de liste est leur contenu, leurs données. Vous aurez souvent besoin d'afficher plusieurs instances du même composant avec des données différentes lors de la création d'interfaces : des listes de commentaires aux galeries d'images de profil. Dans ces situations, vous pouvez stocker ces données dans des objets et tableaux JavaScript et utiliser des méthodes commemap()etfilter()pour en faire le rendu sous forme de listes de composants.

Voici un court exemple de génération d'une liste d'éléments à partir d'un tableau :

  1. Déplacezles données dans un tableau :
  1. Transformezles membres depeopleen un nouveau tableau de nœuds JSX,listItems:
  1. RetournezlistItemsdepuis votre composant, enveloppé dans une balise<ul>:

Voici le résultat :

Remarquez que le bac à sable ci-dessus affiche une erreur dans la console :

Console

Avertissement : chaque enfant d’une liste doit avoir une prop « key » unique.

Vous apprendrez à corriger cette erreur plus loin sur cette page. Avant cela, ajoutons un peu de structure à vos données.

Filtrage de tableaux d'éléments

Ces données peuvent être encore plus structurées.

Imaginons que vous souhaitiez afficher uniquement les personnes dont la profession est'chemist'. Vous pouvez utiliser la méthodefilter()de JavaScript pour ne retourner que ces personnes. Cette méthode prend un tableau d'éléments, les passe à travers un « test » (une fonction qui retournetrueoufalse), et retourne un nouveau tableau contenant uniquement les éléments qui ont réussi le test (qui ont retournétrue).

Vous ne voulez que les éléments oùprofessionvaut'chemist'. La fonction de « test » pour cela ressemble à(person) => person.profession === 'chemist'. Voici comment l'assembler :

  1. Créezun nouveau tableau contenant uniquement les personnes « chimiste »,chemists, en appelantfilter()surpeopleavec le filtreperson.profession === 'chemist':
  1. Maintenant,appliquezunmapsurchemists :
  1. Enfin,retournezleslistItemsdepuis votre composant :
Piège

Les fonctions fléchées retournent implicitement l’expression qui suit immédiatement=>, donc vous n’avez pas besoin d’une instructionreturn :

Cependant,vous devez écrirereturnexplicitement si votre=>est suivi d’une{accolade !

Les fonctions fléchées contenant=> {sont dites avoir un« corps de bloc ».Elles vous permettent d’écrire plus d’une ligne de code, mais vousdevezécrire une instructionreturnvous-même. Si vous l’oubliez, rien n’est retourné !

Maintenir l’ordre des éléments de liste aveckey

Remarquez que tous les sandboxes ci-dessus affichent une erreur dans la console :

Console

Avertissement : chaque enfant d’une liste doit avoir une prop « key » unique.

Vous devez donner à chaque élément du tableau unekey— une chaîne de caractères ou un nombre qui l’identifie de manière unique parmi les autres éléments de ce tableau :

Remarque

Les éléments JSX directement à l’intérieur d’un appelmap()ont toujours besoin de clés !

Les clés indiquent à React à quel élément du tableau correspond chaque composant, afin qu’il puisse les faire correspondre plus tard. Cela devient important si vos éléments de tableau peuvent se déplacer (par exemple à cause d’un tri), être insérés ou supprimés. Unekeybien choisie aide React à déduire ce qui s’est exactement passé et à effectuer les mises à jour correctes dans l’arbre DOM.

Plutôt que de générer des clés à la volée, vous devriez les inclure dans vos données :

Deep Dive
Afficher plusieurs nœuds DOM pour chaque élément de liste

Où obtenir votrekey

Différentes sources de données fournissent différentes sources de clés :

  • Données provenant d'une base de données :Si vos données proviennent d'une base de données, vous pouvez utiliser les clés/ID de la base de données, qui sont naturellement uniques.
  • Données générées localement :Si vos données sont générées et persistées localement (par exemple, des notes dans une application de prise de notes), utilisez un compteur incrémental,crypto.randomUUID()ou un package commeuuidlors de la création des éléments.

Règles des clés

  • Les clés doivent être uniques parmi les éléments frères.Cependant, il est acceptable d'utiliser les mêmes clés pour les nœuds JSX dans des tableauxdifférents.
  • Les clés ne doivent pas changer, sinon cela contredit leur objectif ! Ne les générez pas pendant le rendu.

Pourquoi React a-t-il besoin de clés ?

Imaginez que les fichiers sur votre bureau n'aient pas de noms. Au lieu de cela, vous les référenceriez par leur ordre — le premier fichier, le deuxième fichier, et ainsi de suite. Vous pourriez vous y habituer, mais une fois que vous supprimez un fichier, cela deviendrait déroutant. Le deuxième fichier deviendrait le premier, le troisième fichier deviendrait le deuxième, et ainsi de suite.

Les noms de fichiers dans un dossier et les clés JSX dans un tableau servent un objectif similaire. Ils nous permettent d'identifier de manière unique un élément parmi ses frères. Une clé bien choisie fournit plus d'informations que la position dans le tableau. Même si lapositionchange en raison d'un réordonnancement, lakeypermet à React d'identifier l'élément tout au long de sa durée de vie.

Piège

Vous pourriez être tenté d'utiliser l'index d'un élément dans le tableau comme clé. En fait, c'est ce que React utilisera si vous ne spécifiez pas dekey. Mais l'ordre dans lequel vous affichez les éléments changera au fil du temps si un élément est inséré, supprimé ou si le tableau est réordonné. L'index comme clé conduit souvent à des bugs subtils et déroutants.

De même, ne générez pas de clés à la volée, par exemple aveckey={Math.random()}. Cela entraînera que les clés ne correspondront jamais entre les rendus, ce qui forcera la recréation de tous vos composants et du DOM à chaque fois. Non seulement c'est lent, mais cela entraînera également la perte de toute saisie utilisateur à l'intérieur des éléments de la liste. Utilisez plutôt un ID stable basé sur les données.

Notez que vos composants ne recevront paskeyen tant que prop. Elle n'est utilisée que comme un indice par React lui-même. Si votre composant a besoin d'un ID, vous devez le passer en tant que prop séparée :<Profile key={id} userId={id} />.

Récapitulatif

Sur cette page, vous avez appris :

  • Comment déplacer les données hors des composants et les placer dans des structures de données comme des tableaux et des objets.
  • Comment générer des ensembles de composants similaires avec la méthode JavaScriptmap().
  • Comment créer des tableaux d'éléments filtrés avec la méthode JavaScriptfilter().
  • Pourquoi et comment définir unekeysur chaque composant d'une collection pour que React puisse suivre chacun d'eux même si leur position ou leurs données changent.

Try out some challenges

Challenge 1 of 4:Splitting a list in two #

This example shows a list of all people.

Change it to show two separate lists one after another: Chemists and Everyone Else. Like previously, you can determine whether a person is a chemist by checking if person.profession === 'chemist'.

上一篇Rendu conditionnel下一篇Maintenir les composants purs