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