Código básico FlatList arroja Advertencia - React Native

FlatList no parece estar funcionando. Recibo esta advertencia.

VirtualizedList: faltan claves para los elementos, asegúrese de especificar una propiedad clave en cada elemento o proporcione un keyExtractor personalizado.

Código:

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

Simplemente haz esto:

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

Fuente: aquí

No necesitas usar keyExtractor. Los documentos React Native no están claros, pero la keypropiedad debe ir en cada elemento de la datamatriz en lugar de en el componente secundario representado. Entonces en lugar 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 es lo que esperarías, solo necesitas poner un keycampo en cada elemento de la datamatriz:

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

Y definitivamente no pongas una cadena aleatoria como clave.

Esto funcionó para mí:

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

Puedes usar

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

NOTA: Usar index.toString (), es decir, se espera que sea una cadena.

Tener una 'identificación' en sus datos

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 esto ayude !!!

Una solución simple es dar a cada entrada una clave única antes de renderizar FlatList, ya que eso es lo que el subyacente VirtualizedListnecesita para rastrear cada entrada.

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

La advertencia aconseja primero hacer esto, o proporcionar un extractor de claves personalizado.

este código me funciona:

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

Esto no dio ninguna advertencia (transformando el índice en una cadena):

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

en caso de que sus datos no sean un objeto: [de hecho, está utilizando cada índice de elemento (en la matriz) como clave]

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

Intenté la respuesta de Ray, pero luego recibí una advertencia de que "la clave debe ser una cadena". La siguiente versión modificada funciona bien para suprimir el original y esta advertencia de clave de cadena si no tiene una buena clave única en el elemento en sí:

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

Por supuesto, si tiene una clave única obvia y buena en el elemento en sí, puede usarla.

Asegúrese de escribir la declaración de devolución, de lo contrario no devolverá nada ... Sucedió conmigo.

Esto funcionó para mí:

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

Convirtiendo el keyExtractoren un stringpero en lugar de usar el índice, use un número generado al azar.

Cuando lo usé keyExtractor={(item, index) => index.toString()}, nunca funcionó y todavía echó una advertencia. Pero tal vez esto funciona para alguien?