web-dev-qa-db-fra.com

Avertissement - React Native

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

VirtualizedList: clés manquantes pour les éléments, veillez à spécifier une propriété de clé sur chaque élément ou à fournir un keyExtractor personnalisé.

Code:

<FlatList 
  data={[{name: 'a'}, {name: 'b'}]} 
  renderItem={
    (item) => <Text key={Math.random().toString()}>{item.name}</Text>
  } 
  key={Math.random().toString()} />
react-native
107
Edison D'souza

Faites simplement ceci:

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

Source: ici

268
Ray

Vous n'avez pas besoin d'utiliser keyExtractor. Les docs natifs React sont un peu flous mais la propriété key devrait figurer dans chaque élément du tableau data 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

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

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

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

34
Ben

Cela a fonctionné pour moi:

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

Vous pouvez utiliser

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

Remarque: à l'aide index.toString () i.e devrait être chaîne.

7
Ramusesan

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 !!!

3
Yogaraj Saravanan

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}
    />
2
harisman nug

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

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

L’avertissement conseille d’agir en premier lieu ou fournit un extracteur de clé personnalisé.

2
Pie 'Oh' Pah

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

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

dans le cas où vos données ne sont 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()}
/>
1
Mahgol Fa

Essayé de répondre à 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'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 valable sur l'article lui-même, vous pouvez simplement l'utiliser.

0
CodeBrew