react-native - flatlist - react native elements

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

Question

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

Answer 1

Esto funcionó para mí:

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

Answer 2

Esto funcionó para mí:

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

Convirtiendo el keyExtractor en una string pero en lugar de usar el índice, use un número generado al azar.

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

Answer 3

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

Answer 4

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.

Answer 5

No necesita usar keyExtractor . Los documentos React Native no están claros, pero la propiedad key debe ir en cada elemento de la matriz de data 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 campo key en cada elemento de la matriz de data :

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

Y definitivamente no pongas una cadena aleatoria como clave.

Answer 6

Puedes usar

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

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

Answer 7

Simplemente haz esto:

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

Fuente: here

Answer 8

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

Answer 9

Una solución simple es dar a cada entrada una clave única antes de renderizar con FlatList , ya que eso es lo que necesita la VirtualizedList subyacente 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.

Answer 10

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

Answer 11

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