Inicio·Mensajes de error

react · JavaScript

El mensaje

Each child in a list should have a unique "key" prop.

Qué significa

Los elementos hermanos renderizados como lista no tienen key, así que React no puede emparejarlos con los mismos elementos en el siguiente render. Construiste los elementos con items.map(...) y omitiste key; es solo una advertencia, la pantalla se dibuja, pero vuelve como un fallo silencioso cuando la lista cambia: el síntoma es el valor de un input o una animación que se queda en la fila equivocada. Dale un id estable de tus datos. Usar el índice del array como key solo es seguro en una lista cuyo orden nunca cambia y donde nada se inserta ni se borra en medio; si no, reproduce casi exactamente el problema de no tener key. Desde React 19 ya no aparece el Warning: inicial.

El arreglo

No hay un comando de una línea. La explicación dice qué revisar.

Lo imprime
react
JavaScript
15

Los errores del navegador y de Node suelen decirte qué se rompió y no por qué el valor llegó a ser así —leíste undefined, no era una función, no era JSON—, así que el lugar del arreglo está aguas arriba de la línea que lanzó el error, y silenciar solo esa línea con ?. y valores por defecto hace que el mismo problema reaparezca más lejos y con una forma más difícil de reconocer.

Cómo leer un mensaje de error

  • Lee desde la primera línea. Cuanto más abajo, más son las tripas de la herramienta; la causa suele estar arriba.
  • Si hay un archivo y un número de línea, empieza ahí: no el marco superior de la pila, sino la línea más alta que nombre un archivo tuyo.
  • Busca el mensaje literal, pero quita antes tus rutas y nombres de variables: eso es lo que impide que la búsqueda coincida.
  • La misma condición se redacta distinto según la versión. Si los resultados no cuadran, añade el número de versión.
  • Antes de pegar un arreglo, comprueba qué descarta. Algunos no se pueden deshacer.

Preguntas frecuentes

Q. ¿Qué significa «Each child in a list should have a unique "key" prop.»?

Los elementos hermanos renderizados como lista no tienen key, así que React no puede emparejarlos con los mismos elementos en el siguiente render. Construiste los elementos con items.map(...) y omitiste key; es solo una advertencia, la pantalla se dibuja, pero vuelve como un fallo silencioso cuando la lista cambia: el síntoma es el valor de un input o una animación que se queda en la fila equivocada. Dale un id estable de tus datos. Usar el índice del array como key solo es seguro en una lista cuyo orden nunca cambia y donde nada se inserta ni se borra en medio; si no, reproduce casi exactamente el problema de no tener key. Desde React 19 ya no aparece el Warning: inicial.

Q. ¿Cómo se arregla?

No hay comando de una línea. La explicación de arriba dice qué revisar.

Q. ¿Qué herramienta lo imprime?

react. Está en JavaScript y el mensaje tiene 11 palabras.

Errores cercanos