hariri.ch
Prenez contact

En 1 minute ~1 min de lecture

Réinitialiser le state React avec une key

Vous changez de profil, mais le formulaire garde le brouillon précédent ?

Deux colonnes comparent le même éditeur à la même position dans l’arbre React. Sans changement de key, passer d’Alice à Bob conserve le brouillon local. Avec key={profil.id}, le passage à Bob change la key et réinitialise le state local.
Comparer un changement de profil sans changement de key et avec une key liée au profil montre pourquoi le brouillon est conservé ou réinitialisé.

Une key participe à l’identité d’un composant React, y compris hors d’une liste. Elle permet notamment de faire correspondre la durée de vie d’un formulaire au profil en cours d’édition.

Au même endroit dans l’arbre, un composant de même type conserve son state lorsque ses props changent. Si sa key change, React le recrée avec un state initialisé à neuf.

Par exemple, <Editeur profil={profil} /> contient un brouillon dans son state local. Passer du profil d’Alice à celui de Bob peut conserver le brouillon d’Alice. Avec <Editeur key={profil.id} profil={profil} />, le changement d’identifiant réinitialise le formulaire.

Changer les props actualise les données reçues ; changer la key réinitialise le state local.

Publié par :

Dans le même esprit

À lire ensuite