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()} />
react-native
Edison D'souza
quelle
quelle
Antworten:
Mach das einfach:
Quelle: hier
quelle
keyExtractor={(item, index) => index.toString()}
Sie müssen nicht verwenden
keyExtractor
. Die React Native-Dokumente sind etwas unklar, aber diekey
Eigenschaft sollte in jedem Element desdata
Arrays und nicht in der gerenderten untergeordneten Komponente enthalten sein. Also eher alsWas Sie erwarten würden, müssen Sie nur ein
key
Feld in jedes Element desdata
Arrays einfügen:Und auf keinen Fall eine zufällige Zeichenfolge als Schlüssel verwenden.
quelle
Das hat bei mir funktioniert:
quelle
keyExtractor={ ( item, index ) => `${index}` }
Sie können verwenden
HINWEIS: Verwenden von index.toString (), dh als Zeichenfolge erwartet.
quelle
Haben Sie eine 'ID' in Ihren Daten
Hoffe das hilft !!!
quelle
Eine einfache Lösung besteht darin, jedem Eintrag vor dem Rendern einen eindeutigen Schlüssel zu geben
FlatList
, da der Basiswert diesVirtualizedList
benötigt, um jeden Eintrag zu verfolgen.In der Warnung wird empfohlen, dies zuerst zu tun oder einen benutzerdefinierten Schlüsselextraktor bereitzustellen.
quelle
Dieser Code funktioniert für mich:
quelle
Dies gab keine Warnung (Umwandlung des Index in eine Zeichenfolge):
quelle
Falls Ihre Daten kein Objekt sind: [Tatsächlich wird jeder Elementindex (im Array) als Schlüssel verwendet]
quelle
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:
Wenn Sie einen offensichtlichen und guten eindeutigen Schlüssel für den Artikel selbst haben, können Sie diesen natürlich einfach verwenden.
quelle
Stellen Sie sicher, dass Sie eine return-Anweisung schreiben, da sonst nichts zurückgegeben wird.
quelle
Das hat bei mir funktioniert:
Verwandeln Sie das
keyExtractor
in ein,string
aber 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?quelle
flatlists