web-dev-qa-db-fra.com

erreur: ne pas utiliser l'index de tableau dans les clés

J'utilise index pour générer des clés dans une liste. Cependant, es-lint génère une erreur pour la même chose. React doc indique également que l’utilisation de l’index d’élément comme clé doit être utilisée en dernier recours. 

const list = children.map((child, index) =>
    <li key={index}> {child} </li>);

J'ai envisagé d'utiliser react-key-index. npm install react-key-index donne l'erreur suivante:

npm ERR! code E404

npm ERR! 404 Not Found: react-key-index@latest

Y a-t-il des suggestions sur d'autres packages permettant de générer une clé unique? Toute suggestion sur le générateur de clés est appréciée!

reactjsnpm
9
Tanvi Patel

Lorsque vous utilisez l'index d'un tableau en tant que clé, React optimisera et ne restituera pas comme prévu. Ce qui se passe dans un tel scénario peut être expliqué avec un exemple.

Supposons que le composant parent obtienne un tableau de 10 éléments et rend 10 composants en fonction du tableau. Supposons que le cinquième élément soit ensuite retiré du tableau. Lors du prochain rendu, le parent recevra un tableau de 9 éléments et React affichera 9 composants. Ceci apparaîtra lorsque le 10ème composant sera supprimé, au lieu du 5ème, car React n’a aucun moyen de différencier les éléments en fonction de l’index. 

Par conséquent, utilisez toujours un identifiant unique en tant que clé pour les composants rendus à partir d'un tableau d'éléments.

Vous pouvez générer votre propre clé unique en utilisant l'un des champs de l'objet enfant qui est unique en tant que clé. Normalement, n'importe quel champ id de l'objet enfant peut être utilisé s'il est disponible.

Éditer: vous ne pourrez voir le comportement mentionné ci-dessus se produire que si les composants créent et gèrent leur propre état, par exemple. dans des zones de texte non contrôlées, des minuteries, etc. E.g. Erreur de réaction lors de la suppression du composant d'entrée

18
palsrealm
USE parseInt(index.toString());

voir ci-dessous

 const renderMenu = [];
 menus.forEach((element, index) => {
        renderMenu.Push(
          <View
            key={parseInt(index.toString())}/>
          </View>
        )
      });
0
Tuan Nguyen