Grundlegende FlatList-Codewürfe Warnung - Native reagieren

Question

FlatList scheint nicht zu funktionieren. Ich bekomme diese Warnung.

VirtualizedList: fehlende Schlüssel für Elemente, stellen Sie sicher, dass Sie für jedes Element eine Schlüsseleigenschaft angeben oder einen benutzerdefinierten keyExtractor bereitstellen.

Code:

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

Answer 1

einfach dies zu tun:

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

Quelle: here

Answer 2

Sie brauchen nicht keyExtractor zu verwenden. Die React Native docs sind ein wenig unklar , aber die key Eigenschaft sollte in jedem Element der data Array statt in der gerenderten Kindkomponente gehen. Also anstatt

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

das ist, was man erwarten würde, brauchen Sie nur in jedem Element des data Array ein key Feld stellen:

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

Und definitiv nicht eine zufällige Zeichenfolge setzen als Schlüssel.

Answer 3

Eine einfache Lösung besteht darin, jedem Eintrag einen eindeutigen Schlüssel zu geben, bevor er mit FlatList rendert, da dies der zugrunde liegende VirtualizedList jeden Eintrag verfolgen muss.

Die Warnung tut dies zuerst, oder bietet einen benutzerdefinierten Schlüssel Extraktor.