Grundlegender FlatList-Code löst Warning - React Native aus

FlatList scheint nicht zu funktionieren. Ich bekomme diese Warnung.

VirtualizedList: Fehlende Schlüssel für Elemente. Geben Sie für jedes Element eine Schlüsseleigenschaft an oder geben Sie einen benutzerdefinierten keyExtractor an.

Code:

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

Mach das einfach:

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

Quelle: hier

Sie müssen nicht verwenden keyExtractor. Die React Native-Dokumente sind etwas unklar, aber die keyEigenschaft sollte in jedem Element des dataArrays und nicht in der gerenderten untergeordneten Komponente enthalten sein. Also eher als

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

Was Sie erwarten würden, müssen Sie nur ein keyFeld in jedes Element des dataArrays einfügen:

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

Und auf keinen Fall eine zufällige Zeichenfolge als Schlüssel verwenden.

Das hat bei mir funktioniert:

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

Sie können verwenden

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

HINWEIS: Verwenden von index.toString (), dh als Zeichenfolge erwartet.

Haben Sie eine 'ID' in Ihren Daten

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

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

Hoffe das hilft !!!

Eine einfache Lösung besteht darin, jedem Eintrag vor dem Rendern einen eindeutigen Schlüssel zu geben FlatList, da der Basiswert dies VirtualizedListbenötigt, um jeden Eintrag zu verfolgen.

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

In der Warnung wird empfohlen, dies zuerst zu tun oder einen benutzerdefinierten Schlüsselextraktor bereitzustellen.

Dieser Code funktioniert für mich:

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}
    />

Dies gab keine Warnung (Umwandlung des Index in eine Zeichenfolge):

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

Falls Ihre Daten kein Objekt sind: [Tatsächlich wird jeder Elementindex (im Array) als Schlüssel verwendet]

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

Versuchte Rays Antwort, bekam dann aber eine Warnung, dass "der Schlüssel eine Zeichenfolge sein muss". Die folgende modifizierte Version funktioniert gut, um das Original und diese Zeichenfolgenschlüsselwarnung zu unterdrücken, wenn Sie keinen guten eindeutigen Schlüssel für das Element selbst haben:

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

Wenn Sie einen offensichtlichen und guten eindeutigen Schlüssel für den Artikel selbst haben, können Sie diesen natürlich einfach verwenden.

Stellen Sie sicher, dass Sie eine return-Anweisung schreiben, da sonst nichts zurückgegeben wird.

Das hat bei mir funktioniert:

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

Verwandeln Sie das keyExtractorin ein, stringaber anstatt Index zu verwenden, verwenden Sie eine zufällig generierte Zahl.

Als ich es benutzte keyExtractor={(item, index) => index.toString()}, hat es nie funktioniert und trotzdem eine Warnung ausgegeben. Aber vielleicht funktioniert das für jemanden?