Bloqué sur l'avertissement "clé unique"

Question

J'adapte actuellement un tutoriel Mobx pour une application à faire. link Ce que je veux faire est d'ajouter un simple bouton de compteur à chaque élément de liste rendu. Je pensais que ce serait assez simple, mais je dois faire une erreur syntaxique parce que je ne peux pas obtenir les choses à mailler correctement. La principale erreur que je reçois en ce moment est que "Chaque enfant dans un tableau ou un itérateur doit avoir une propriété 'clé' unique". J'ai pensé que je résoudrais cela en ajoutant un uuid à chaque compteur (le compteur est ce qui fait que l'erreur commence à apparaître). Hélas, je n'arrive pas à trouver une solution.

Voici le dépôt GitHub pour l'application: https://github.com/Darthmaul/UmCount

Plus précisément this file est celui qui a reçu le plus de modifications. J'ai également ajouté un fichier "counterstore.js" pour garder le magasin du compteur intact (ce qui semble échouer).

Toute aide serait appréciée. À ce stade, je ne sais pas ce qui ne va pas et ce qui est juste.

Merci,

Andrew

Answer 1

Lorsque vous avez un composant qui a un tableau d'enfants, dont chacun peut avoir ses propres enfants, non seulement les enfants de haut niveau, mais aussi chaque enfant à une plus profonde niveau a besoin de sa propre clé.

Le problème faisant

const Items = ({items}) => (
    <View style={{flex: 1, paddingTop: 10}}> 
    {items.map((item, i) => { 
     return (<View> 
      <Text style={styles.item} key={i}>• {item} - {store.counter}</Text> 
      <Button onPress={() => store.increment()} title="+1" color="#50EB5D" key={uuid()} /> 
      </View> 
     )}) 
    } 
    </View> 
) 

est que vos composants Text et Button ont les clés, mais vos View s ne sont pas. React utilise des clés pour la réconciliation et trouve la modification minimale chaque fois qu'une liste de composants change. La manière dont vous définissez les clés affecte la règle de rapprochement lorsque votre tableau change: Vous pouvez définir votre View, Text et Button pour chaque élément de tableau pour avoir la même clé si vous savez que lorsque l'un d'eux change, la ligne entière change, mais si chacun d'eux change séparément, alors vous devriez générer un identifiant unique pour chacun d'entre eux.

React docs on reconciliation and keys.