Le code de base de FlatList génère un avertissement - React Native

Question

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é de clé sur chaque élément ou fournissez un keyExtractor personnalisé.

Code :

<FlatList 
  data={[{name: 'a'}, {name: 'b'}]} 
  renderItem={
    (item) => <Text key={Math.random().toString()}>{item.name}</Text>
  } 
  key={Math.random().toString()} />

Answer 1

Faites simplement ceci :

<FlatList 
  data={[{name: 'a'}, {name: 'b'}]} 
  renderItem={
    ({item}) => <Text>{item.name}</Text>
  } 
  keyExtractor={(item, index) => index.toString()}
/>

Source : aquí

Answer 2

Vous n'avez pas besoin d'utiliser keyExtractor . Le site Documentation sur React Native sont un peu flous mais le key doit être placée dans chaque élément du data tableau plutôt que dans le composant enfant rendu. Ainsi, au lieu de

<FlatList
  data={[{id: 'a'}, {id: 'b'}]}
  renderItem={({item}) => <View key={item.id} />}
/>
// React will give you a warning about there being no key prop

ce qui est ce à quoi on s'attend, il suffit de mettre une key dans chaque élément du data le tableau :

<FlatList
  data={[{key: 'a'}, {key: 'b'}]}
  renderItem={({item}) => <View />}
/>
// React is happy!

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

Answer 3

Cela a marché pour moi :

<FlatList
  data={[{name: 'a'}, {name: 'b'}]} 
  keyExtractor={(item, index) => index.toString()}
/>

Answer 4

Vous pouvez utiliser

 <FlatList   
  data={[]}  
  keyExtractor={(item, index) => index.toString()} 
 />

NOTE : Utilisation de index.toString(), c'est-à-dire que l'on s'attend à ce que ce soit une chaîne de caractères.

Answer 5

Une solution simple consiste à donner à chaque entrée une clé unique avant d'effectuer le rendu avec FlatList puisque c'est ce que le sous-jacent VirtualizedList doit assurer le suivi de chaque entrée.

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

L'avertissement conseille de le faire d'abord, ou de fournir un extracteur de clés personnalisé.