web-dev-qa-db-fra.com

React Native - Utiliser un keyExtractor avec FlatList

Je reçois le: 

"VirtualizedList: missing keys for items, make sure to specify a key property on an item or provide a custom keyExtractor"

assez déroutant ..., le tableau que je passe a une propriété de clé définie dans chaque objet du tableau. J'ai ce tableau défini dans this.state. J'ai exécuté une impression rapide dans la console pour être sûr: print out of array

Chaque objet du tableau est défini comme:

  var obj = {key: doc.id, value: doc.data()};

(la doc et les données proviennent d'une autre partie de mon application, mais je sais que doc.id est unique)

Après quelques recherches sur Google, j'ai ensuite essayé de définir un Key Extractor comme suit:

_keyExtractor = (item, index) => item.key;

et puis voici ma définition de flatlist:

  <FlatList
        style={{}}
        data={this.state.FeedDataCollection}
        keyExtractor={this._keyExtractor}
        renderItem={(rowData) =>this.RenderFeedCard(rowData)}
      />

Toujours en train de recevoir la même erreur, à ce stade, je ne sais pas trop comment gérer cela ni ce qu’il fait mal. Des idées? Merci beaucoup!

arraysreact-nativereact-native-flatlist
12
jdoej

"VirtualizedList: clés manquantes pour les éléments, assurez-vous de spécifier une propriété key Sur un élément ou fournissez un keyExtractor personnalisé"

Ceci est un avertissement que les éléments de la liste sont des clés manquantes. Ces clés uniques permettent à la VirtualizedList (sur laquelle est construite la FlatList) de suivre les éléments et sont vraiment importantes en termes d’efficacité.

Vous devrez choisir un accessoire de clé unique, comme un id ou un email.

La keyExtractor revient à utiliser la index par défaut. Mais l'avertissement restera visible.

Exemple: Un objet défini en tant que {key: doc.id, value: doc.data()} peut être utilisé dans l'extracteur en tant que:

keyExtractor={(item, index) => item.key}

Le composant Flatlist devrait ressembler à ça:

<FlatList
  style={{}}
  data={this.state.FeedDataCollection}
  keyExtractor={(item, index) => item.key}
  renderItem={(rowData) =>this.RenderFeedCard(rowData)}
/>
23
Akis Tofas

je fais cela et travaille pour moi:

keyExtractor={(item, index) => 'key'+index}
2
amirhosein

@Sarantis Tofas a la bonne réponse. Résolu pour moi! Deux notes supplémentaires basées sur les commentaires:

  1. Si vous utilisez index, veillez à utiliser index.toString () ou vous obtiendrez un autre avertissement ( Echec du type de contexte de l'enfant - numéro de type fourni à la chaîne attendue de CellRenderer ).
  2. FlatList fonctionnera avec index par défaut si vous n'avez pas de propriétés de clé ou de keyExtractor défini, mais un avertissement sera toujours émis.
2
brownmagik352

Essayez d'utiliser listkey au lieu de keyExtractor, cela a fonctionné pour moi

0
Rotem Shaanan