Le code FlatList de base lève 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é 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()} />

Faites simplement ceci:

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

Source: ici

Vous n'avez pas besoin d'utiliser keyExtractor. Les documents React Native sont un peu flous mais la keypropriété doit aller dans chaque élément du datatableau plutôt que dans le composant enfant rendu. Donc plutôt que

<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 à quoi vous vous attendez, il vous suffit de mettre un keychamp dans chaque élément du datatableau:

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

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

Cela a fonctionné pour moi:

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

Vous pouvez utiliser

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

REMARQUE: en utilisant index.toString (), c'est-à-dire qu'il devrait être une chaîne.

Avoir un 'identifiant' dans vos données

const data = [
{
  name: 'a',
  id: 1
},
{
  name: 'b',
  id: 2
}];

<FlatList 
  data={data}
  renderItem={
    (item) => <Text>{item.name}</Text>
  } 
  keyExtractor={item => item.id}
/>

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

Une solution simple consiste simplement à donner à chaque entrée une clé unique avant le rendu avec FlatList, car c'est ce dont le sous-jacent a VirtualizedListbesoin pour suivre chaque entrée.

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

L'avertissement conseille de faire cela 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',
  },]
 
  <FlatList
      data= {content}
      renderItem = { ({ item }) => (
        <View style={{ flexDirection: 'column',             justifyContent: 'center' }}>
      <Text style={{ fontSize: 20, fontWeight: '300', color: '#000000' }}>{item.name}</Text>
      <Text style={{ color: '#000000' }}>{item.content}</Text>
        
        />
      )}
      keyExtractor={(item,index) => item.content}
    />

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

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

au cas où vos données ne seraient pas un objet: [en fait, il utilise chaque index d'élément (dans le tableau) comme clé]

   data: ['name1','name2'] //declared in constructor
     <FlatList
  data= {this.state.data}
  renderItem={({item}) => <Text>{item}</Text>}
  ItemSeparatorComponent={this.renderSeparator}
keyExtractor={(item, index) => index.toString()}
/>

J'ai essayé la réponse de Ray, mais j'ai reçu un avertissement indiquant que "la clé doit être une chaîne". La version modifiée suivante fonctionne bien pour supprimer l'original et cet avertissement de clé de chaîne si vous n'avez pas une bonne clé unique sur l'élément lui-même:

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

Bien sûr, si vous avez une clé unique évidente et bonne sur l'élément lui-même, vous pouvez simplement l'utiliser.

Assurez-vous d'écrire l'instruction return sinon elle ne renverra rien..Happened avec moi.

Cela a fonctionné pour moi:

<FlatList
  data={items}
  renderItem={({ title }) => <Text>{title}</Text> }}
  keyExtractor={() => Math.random().toString(36).substr(2, 9)} />

Transformer le keyExtractoren un stringmais au lieu d'utiliser un index, utilisez un nombre généré de manière aléatoire.

Quand je l'ai utilisé keyExtractor={(item, index) => index.toString()}, cela n'a jamais fonctionné et a quand même émis un avertissement. Mais peut-être que cela fonctionne pour quelqu'un?