v19.2Latest

Renderizado de listas

A menudo querrás mostrar múltiples componentes similares a partir de una colección de datos. Puedes usar losmétodos de arrays de JavaScriptpara manipular un array de datos. En esta página, usarásfilter() y map()con React para filtrar y transformar tu array de datos en un array de componentes.

Aprenderás
  • Cómo renderizar componentes desde un array usando elde JavaScriptmap()
  • Cómo renderizar solo componentes específicos usando elde JavaScriptfilter()
  • Cuándo y por qué usar claves (keys) de React

Renderizado de datos desde arrays

Supongamos que tienes una lista de contenido.

La única diferencia entre esos elementos de lista es su contenido, sus datos. A menudo necesitarás mostrar varias instancias del mismo componente usando datos diferentes al construir interfaces: desde listas de comentarios hasta galerías de imágenes de perfil. En estas situaciones, puedes almacenar esos datos en objetos y arrays de JavaScript y usar métodos comomap() y filter()para renderizar listas de componentes a partir de ellos.

Aquí hay un breve ejemplo de cómo generar una lista de elementos desde un array:

  1. Moverlos datos a un array:
  1. Mapearlos miembros depeoplea un nuevo array de nodos JSX,listItems:
  1. DevolverlistItemsdesde tu componente envuelto en un<ul>:

Aquí está el resultado:

Observa que el sandbox anterior muestra un error en la consola:

Consola

Advertencia: Cada hijo en una lista debe tener una prop "key" única.

Aprenderás cómo solucionar este error más adelante en esta página. Antes de llegar a eso, agreguemos algo de estructura a tus datos.

Filtrado de arrays de elementos

Estos datos pueden estructurarse aún más.

Digamos que quieres una forma de mostrar solo a las personas cuya profesión es'chemist'. Puedes usar el métodofilter()de JavaScript para devolver solo esas personas. Este método toma un array de elementos, los pasa por una "prueba" (una función que devuelvetrue o false), y devuelve un nuevo array con solo aquellos elementos que pasaron la prueba (devolvierontrue).

Solo quieres los elementos dondeprofessiones'chemist'. La función de "prueba" para esto se ve como(person) => person.profession === 'chemist'. Así es cómo se combina:

  1. Creaun nuevo array solo con las personas "químicas",chemists, llamando afilter() en peoplefiltrando porperson.profession === 'chemist':
  1. Ahoramapeasobrechemists:
  1. Finalmente,devuelveloslistItemsdesde tu componente:
Precaución

Las funciones flecha devuelven implícitamente la expresión justo después de=>, por lo que no necesitas una declaraciónreturn:

Sin embargo,debes escribirreturnexplícitamente si después de tu=>hay una{llave!

Se dice que las funciones flecha que contienen=> {tienen un"cuerpo de bloque".Te permiten escribir más de una línea de código, perotienes queescribir una declaraciónreturntú mismo. ¡Si lo olvidas, no se devuelve nada!

Mantener los elementos de la lista en orden conkey

Observa que todos los sandboxes anteriores muestran un error en la consola:

Consola

Advertencia: Cada hijo en una lista debe tener una prop "key" única.

Debes dar a cada elemento del array unakey— una cadena o un número que lo identifique de forma única entre los demás elementos de ese array:

Nota

¡Los elementos JSX directamente dentro de una llamada amap()siempre necesitan keys!

Las keys le indican a React a qué elemento del array corresponde cada componente, para que pueda emparejarlos más tarde. Esto se vuelve importante si los elementos de tu array pueden moverse (por ejemplo, debido a una ordenación), insertarse o eliminarse. Unakeybien elegida ayuda a React a inferir qué ha sucedido exactamente y realizar las actualizaciones correctas en el árbol DOM.

En lugar de generar keys sobre la marcha, deberías incluirlas en tus datos:

Deep Dive
Mostrar varios nodos DOM para cada elemento de la lista

Dónde obtener tukey

Diferentes fuentes de datos proporcionan diferentes fuentes de claves:

  • Datos de una base de datos:Si tus datos provienen de una base de datos, puedes usar las claves/IDs de la base de datos, que son únicas por naturaleza.
  • Datos generados localmente:Si tus datos se generan y persisten localmente (por ejemplo, notas en una aplicación de notas), usa un contador incremental,crypto.randomUUID()o un paquete comouuidal crear elementos.

Reglas de las claves

  • Las claves deben ser únicas entre hermanos.Sin embargo, está bien usar las mismas claves para nodos JSX en arraysdiferentes.
  • Las claves no deben cambiaro eso derrota su propósito. ¡No las generes mientras renderizas!

¿Por qué React necesita claves?

Imagina que los archivos en tu escritorio no tuvieran nombres. En su lugar, te referirías a ellos por su orden: el primer archivo, el segundo archivo, y así sucesivamente. Podrías acostumbrarte, pero una vez que elimines un archivo, se volvería confuso. El segundo archivo se convertiría en el primero, el tercer archivo sería el segundo, y así sucesivamente.

Los nombres de archivo en una carpeta y las claves JSX en un array sirven para un propósito similar. Nos permiten identificar de manera única un elemento entre sus hermanos. Una clave bien elegida proporciona más información que la posición dentro del array. Incluso si laposicióncambia debido a una reordenación, lakeypermite a React identificar el elemento a lo largo de su vida útil.

Precaución

Podrías sentirte tentado a usar el índice de un elemento en el array como su clave. De hecho, eso es lo que React usará si no especificas unakey. Pero el orden en el que renderizas los elementos cambiará con el tiempo si se inserta, elimina o reordena un elemento. Usar el índice como clave a menudo conduce a errores sutiles y confusos.

Del mismo modo, no generes claves sobre la marcha, por ejemplo, conkey={Math.random()}. Esto hará que las claves nunca coincidan entre renderizados, lo que llevará a que todos tus componentes y DOM se vuelvan a crear cada vez. No solo es lento, sino que también perderá cualquier entrada del usuario dentro de los elementos de la lista. En su lugar, usa un ID estable basado en los datos.

Ten en cuenta que tus componentes no recibiránkeycomo prop. Solo es utilizada como una pista por React mismo. Si tu componente necesita un ID, debes pasarlo como una prop separada:<Profile key={id} userId={id} />.

Recapitulación

En esta página aprendiste:

  • Cómo mover datos fuera de los componentes y hacia estructuras de datos como arrays y objetos.
  • Cómo generar conjuntos de componentes similares con elmap()de JavaScript.
  • Cómo crear arrays de elementos filtrados con elfilter()de JavaScript.
  • Por qué y cómo establecer unakeyen cada componente de una colección para que React pueda rastrear cada uno incluso si su posición o datos cambian.

Try out some challenges

Challenge 1 of 4:Splitting a list in two #

This example shows a list of all people.

Change it to show two separate lists one after another: Chemists and Everyone Else. Like previously, you can determine whether a person is a chemist by checking if person.profession === 'chemist'.

上一篇Renderizado Condicional下一篇Mantener los Componentes Puros