Le code FlatList de base émet un avertissement – React Native

FlatList ne semble pas fonctionner. Je reçois cet avertissement.

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

Code:

 {item.name} } key={Math.random().toSsortingng()} /> 

Faites simplement ceci:

  {item.name} } keyExtractor={(item, index) => index} /> 

Source: ici

Vous n’avez pas besoin d’utiliser keyExtractor . Les documents React Native ne sont pas très clairs, mais la propriété key doit figurer dans chaque élément du tableau de data plutôt que dans le composant enfant rendu. Donc plutôt que

  } /> // React will give you a warning about there being no key prop 

c’est ce que vous attendez, il vous suffit de mettre un champ key dans chaque élément du tableau de data :

  } /> // React is happy! 

Et surtout, ne mettez pas une chaîne aléatoire comme clé.

Cela a fonctionné pour moi:

  index.toSsortingng()} /> 

Une solution simple consiste à simplement donner à chaque entrée une clé unique avant le rendu avec FlatList , car c’est ce que la VirtualizedList sous-jacente doit suivre pour chaque entrée.

  users.forEach((user, i) => { user.key = i + 1; }); 

L’avertissement vous conseille de le faire en premier ou fournit un extracteur de clé personnalisé.

ce code fonctionne pour moi:

 const content = [ { name: 'Marta', content: 'Payday in November: Rp. 987.654.321', },]  (  {item.name} {item.content} /> )} keyExtractor={(item,index) => item.content} /> 

Avoir un identifiant dans vos données

 const data = [ { name: 'a', id: 1 }, { name: 'b', id: 2 }];  {item.name} } keyExtractor={item => item.id} /> 

J’espère que cela t’aides !!!

Cela n’a donné aucun avertissement (transformation de l’index en chaîne):

  index+"" } renderItem={ (item) => {item.name} } /> 

Vous pouvez utiliser

   index.toSsortingng()} /> 

REMARQUE: À l’aide de index.toSsortingng () c’est-à-dire que l’on s’attend à ce que ce soit une chaîne.

Essayé la réponse de Ray mais a ensuite reçu un avertissement que “la clé doit être une chaîne”. La version modifiée suivante fonctionne bien pour supprimer l’avertissement de clé d’origine et de chaîne si vous ne disposez pas d’une clé unique correcte sur l’élément lui-même:

 keyExtractor={(item, index) => item + index} 

Bien sûr, si vous avez une clé unique évidente sur l’article, vous pouvez simplement l’utiliser.

dans le cas où vos données ne sont pas un object: [en fait, il utilise chaque index (dans le tableau) comme une clé]

  data: ['name1','name2'] //declared in constructor  {item}} ItemSeparatorComponent={this.renderSeparator} keyExtractor={(item, index) => index.toSsortingng()} /> 

Cela a fonctionné pour moi:

  {title} }} keyExtractor={() => Math.random().toSsortingng(36).substr(2, 9)} /> 

Transformer le keyExtractor en ssortingng mais au lieu d’utiliser index utilise un nombre généré de manière aléatoire.

Lorsque j’ai utilisé keyExtractor={(item, index) => index.toSsortingng()} , cela n’a jamais fonctionné et un avertissement a été lancé. Mais peut-être que cela fonctionne pour quelqu’un?