Saltar al contenido

React Native: use un keyExtractor con FlatList

Este equipo de expertos pasados algunos días de investigación y recopilar de datos, encontramos los datos necesarios, nuestro deseo es que todo este artículo sea de gran utilidad en tu trabajo.

Solución:

“Lista virtualizada: falta keys para artículos, asegúrese de especificar un key
propiedad en un elemento o proporcionar un keyExtractor personalizado”

Esta es una advertencia de que faltan los elementos de la lista. keys. Estos únicos keys son los que permiten que VirtualizedList (que es en lo que se basa FlatList) realice un seguimiento de los elementos y son realmente importantes en términos de eficiencia.

Tendrás que elegir un único key apoyo, como un id o un email.

los keyExtractor vuelve a usar el index por defecto. Pero la advertencia permanecerá visible.

Ejemplo :
un objeto definido como key: doc.id, value: doc.data() se puede utilizar en el extractor como:

keyExtractor=(item, index) => item.key

El componente Flatlist debería verse así:

 item.key
  renderItem=(rowData) =>this.RenderFeedCard(rowData)
/>

Hago esto y trabajo para mí:

keyExtractor=(item, index) => 'key'+index

La importancia de este error está en el punto en que comienzas a cambiar o eliminar alguno de los objetos de tu array debido a cómo su lista se actualizará si no proporciona eso key.

La forma en que React Native maneja un cambio en su lista sin un key es borrar todo lo visible en pantalla y luego mira el nuevo array de datos y representa un solo elemento para cada uno.

No queremos que React Native reconstruya una lista completa solo por un pequeño cambio en el array de datos. Idealmente, queremos que React Native detecte específicamente el objeto que eliminamos o cambiamos y lo actualice en consecuencia, pero eso no sucederá si no proporcionamos el key.

los key La propiedad permite a React Native realizar un seguimiento de esta lista de objetos y de esa manera puede realizar un seguimiento de lo que está modificando o eliminando y simplemente eliminar ese elemento en particular con un determinado key.

De esta manera, la lista no necesita ser reconstruida desde cero. los key permitirá que React Native vincule la definición de un objeto de datos con algún elemento que aparece en la pantalla.

Solo permite que React Native rastree la lista diferente de objetos que estamos representando en la pantalla. También es una optimización del rendimiento al realizar actualizaciones en nuestra lista.

Te mostramos reseñas y calificaciones

Tienes la opción de añadir valor a nuestra información dando tu veteranía en las interpretaciones.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *