Código básico do FlatList lança Aviso - Reagir nativo

O FlatList não parece estar funcionando. Eu recebo este aviso.

VirtualizedList: faltando chaves para itens, especifique uma propriedade de chave em cada item ou forneça um keyExtractor personalizado.

Código:

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

Simplesmente faça o seguinte:

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

Fonte: aqui

Você não precisa usar keyExtractor. Os documentos React Native são um pouco obscuros, mas a keypropriedade deve estar em cada elemento da datamatriz, e não no componente filho renderizado. Então, ao invés de

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

que é o que você esperaria, basta colocar um keycampo em cada elemento da datamatriz:

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

E definitivamente não coloque uma string aleatória como chave.

Isso funcionou para mim:

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

Você pode usar

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

NOTA: Usando index.toString () ou seja, espera-se que seja string.

Tenha um 'id' nos seus dados

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

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

Espero que isto ajude !!!

Uma solução simples é fornecer a cada entrada uma chave exclusiva antes da renderização FlatList, pois é isso que o subjacente VirtualizedListprecisa acompanhar cada entrada.

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

O aviso aconselha fazer isso primeiro ou fornece um extrator de chave personalizado.

este código funciona para mim:

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

Isso não deu nenhum aviso (transformando o índice em uma string):

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

caso seus dados não sejam um objeto: [na verdade, eles estão usando cada índice de item (na matriz) como uma chave]

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

Tentei a resposta de Ray, mas recebi um aviso de que "a chave deve ser uma string". A seguinte versão modificada funciona bem para suprimir o aviso original e esta chave de cadeia, se você não tiver uma boa chave exclusiva no próprio item:

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

Obviamente, se você possui uma chave única óbvia e boa no item em si, basta usá-la.

Certifique-se de escrever a declaração de retorno, caso contrário ele não retornará nada ... Aconteceu comigo.

Isso funcionou para mim:

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

Transformando o keyExtractorem um stringmas, em vez de usar o índice, use um número gerado aleatoriamente.

Quando eu usei keyExtractor={(item, index) => index.toString()}, nunca funcionou e ainda deu um aviso. Mas talvez isso funcione para alguém?