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é clé sur chaque élément ou fournissez un keyExtractor personnalisé.
Code:
{item.name} } key={Math.random().toSsortingng()} />
Faites simplement ceci:
{item.name} } keyExtractor={(item, index) => index} />
Source: ici
Vous n’avez pas besoin d’utiliser keyExtractor
. Les documents React Native ne sont pas très clairs, mais la propriété key
doit figurer dans chaque élément du tableau de data
plutôt que dans le composant enfant rendu. Donc plutôt que
} /> // 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 de data
:
} /> // React is happy!
Et surtout, ne mettez pas une chaîne aléatoire comme clé.
Cela a fonctionné pour moi:
index.toSsortingng()} />
Une solution simple consiste à simplement donner à chaque entrée une clé unique avant le rendu avec FlatList
, car c’est ce que la VirtualizedList
sous-jacente doit suivre pour chaque entrée.
users.forEach((user, i) => { user.key = i + 1; });
L’avertissement vous conseille de le faire 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', },] ( {item.name} {item.content} /> )} keyExtractor={(item,index) => item.content} />
Avoir un identifiant dans vos données
const data = [ { name: 'a', id: 1 }, { name: 'b', id: 2 }]; {item.name} } keyExtractor={item => item.id} />
J’espère que cela t’aides !!!
Cela n’a donné aucun avertissement (transformation de l’index en chaîne):
index+"" } renderItem={ (item) => {item.name} } />
Vous pouvez utiliser
index.toSsortingng()} />
REMARQUE: À l’aide de index.toSsortingng () c’est-à-dire que l’on s’attend à ce que ce soit une chaîne.
Essayé la réponse de 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’avertissement de clé d’origine et de chaîne si vous ne disposez pas d’une clé unique correcte sur l’élément lui-même:
keyExtractor={(item, index) => item + index}
Bien sûr, si vous avez une clé unique évidente sur l’article, vous pouvez simplement l’utiliser.
dans le cas où vos données ne sont pas un object: [en fait, il utilise chaque index (dans le tableau) comme une clé]
data: ['name1','name2'] //declared in constructor {item} } ItemSeparatorComponent={this.renderSeparator} keyExtractor={(item, index) => index.toSsortingng()} />
Cela a fonctionné pour moi:
{title} }} keyExtractor={() => Math.random().toSsortingng(36).substr(2, 9)} />
Transformer le keyExtractor
en ssortingng
mais au lieu d’utiliser index utilise un nombre généré de manière aléatoire.
Lorsque j’ai utilisé keyExtractor={(item, index) => index.toSsortingng()}
, cela n’a jamais fonctionné et un avertissement a été lancé. Mais peut-être que cela fonctionne pour quelqu’un?