Il codice FlatList di base genera Avviso - Reagisci nativo

FlatList non sembra funzionare. Ricevo questo avviso.

VirtualizedList: chiavi mancanti per gli articoli, assicurati di specificare una proprietà chiave su ogni articolo o fornisci un keyExtractor personalizzato.

Codice:

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

Basta fare questo:

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

Fonte: qui

Non è necessario utilizzare keyExtractor. I documenti nativi di React sono un po 'poco chiari ma la keyproprietà dovrebbe andare in ogni elemento datadell'array piuttosto che nel componente figlio renderizzato. Quindi piuttosto che

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

che è quello che ti aspetteresti, devi solo inserire un keycampo in ciascun elemento datadell'array:

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

E sicuramente non mettere una stringa casuale come chiave.

Questo ha funzionato per me:

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

Puoi usare

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

NOTA: l'utilizzo di index.toString (), ovvero dovrebbe essere una stringa.

Avere un "id" nei dati

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

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

Spero che questo ti aiuti !!!

Una soluzione semplice è fornire a ciascuna voce una chiave univoca prima del rendering FlatList, poiché è ciò di cui il sottostante ha VirtualizedListbisogno per tenere traccia di ciascuna voce.

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

L'avvertimento consiglia prima di eseguire questa operazione o fornisce un estrattore di chiavi personalizzato.

questo codice funziona per me:

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

Questo non ha dato alcun avvertimento (trasformando l'indice in una stringa):

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

nel caso in cui i tuoi dati non siano un oggetto: [in effetti sta usando ogni indice di elemento (nell'array) come chiave]

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

Ho provato la risposta di Ray ma poi ha ricevuto un avvertimento che "la chiave deve essere una stringa". La seguente versione modificata funziona bene per sopprimere l'originale e questo avviso di chiave stringa se non si dispone di una buona chiave univoca sull'elemento stesso:

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

Naturalmente se hai una chiave unica ovvia e buona sull'oggetto stesso, puoi semplicemente usarla.

Assicurati di scrivere la dichiarazione di ritorno, altrimenti non restituirà nulla ... Accolto con me.

Questo ha funzionato per me:

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

Trasformando keyExtractorin un stringma invece di usare l'indice usa un numero generato casualmente.

Quando l'ho usato keyExtractor={(item, index) => index.toString()}, non ha mai funzionato e ha comunque lanciato un avvertimento. Ma forse questo funziona per qualcuno?