react · JavaScript
El mensaje
Objects are not valid as a React child (found: object with keys {name, id})
Qué significa
El valor que pediste renderizar es un objeto y no una cadena o un número, y la lista de claves entre paréntesis te dice qué objeto es. Normalmente la línea debería decir {user.name} donde dice {user}, o intentaste renderizar una respuesta completa. Si en vez de una lista de claves ves found: [object Promise], la causa es otra: renderizaste el resultado de una función async sin esperarlo. La solución es elegir el campo a mostrar; JSON.stringify(user) sirve para un vistazo rápido mientras depuras, pero no lo dejes en pantalla.
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 «Objects are not valid as a React child (found: object with keys {name, id})»?
El valor que pediste renderizar es un objeto y no una cadena o un número, y la lista de claves entre paréntesis te dice qué objeto es. Normalmente la línea debería decir {user.name} donde dice {user}, o intentaste renderizar una respuesta completa. Si en vez de una lista de claves ves found: [object Promise], la causa es otra: renderizaste el resultado de una función async sin esperarlo. La solución es elegir el campo a mostrar; JSON.stringify(user) sirve para un vistazo rápido mientras depuras, pero no lo dejes en pantalla.
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 14 palabras.