Violación invariante: los objetos no son válidos como hijo de React
En la función de renderizado de mi componente tengo:
render() {
const items = ['EN', 'IT', 'FR', 'GR', 'RU'].map((item) => {
return (<li onClick={this.onItemClick.bind(this, item)} key={item}>{item}</li>);
});
return (
<div>
...
<ul>
{items}
</ul>
...
</div>
);
}
todo funciona bien, sin embargo, al hacer clic en el <li>elemento recibo el siguiente error:
Error no detectado: infracción invariante: los objetos no son válidos como elemento secundario de React (encontrado: objeto con claves {dispatchConfig, DispatchMarker, NativeEvent, target, currentTarget, type, eventPhase, bubbles, cancelable, timeStamp, defaultPrevented, isTrusted, view, Detail, screenX , screenY, clientX, clientY, ctrlKey, shiftKey, altKey, metaKey, getModifierState, botón, botones, relatedTarget, pageX, pageY, isDefaultPrevented, isPropagationStopped, _dispatchListeners, _dispatchIDs}). Si pretendía representar una colección de elementos secundarios, use una matriz en su lugar o ajuste el objeto usando createFragment(object) de los complementos de React. Verifique el método de renderizado de
Welcome.
Si cambio a this.onItemClick.bind(this, item)dentro (e) => onItemClick(e, item)de la función del mapa, todo funciona como se esperaba.
Si alguien pudiera explicar qué estoy haciendo mal y explicar por qué aparece este error, sería genial.
ACTUALIZACIÓN 1:
la función onItemClick es la siguiente y al eliminar this.setState se produce la desaparición del error.
onItemClick(e, item) {
this.setState({
lang: item,
});
}
Pero no puedo eliminar esta línea porque necesito actualizar el estado de este componente.
Estaba teniendo este error y resultó ser que sin querer estaba incluyendo un Objeto en mi código JSX que esperaba que fuera un valor de cadena:
return (
<BreadcrumbItem href={routeString}>
{breadcrumbElement}
</BreadcrumbItem>
)
breadcrumbElementSolía ser una cadena pero debido a una refactorización se había convertido en un Objeto. Desafortunadamente, el mensaje de error de React no hizo un buen trabajo al indicarme la línea donde existía el problema. Tuve que seguir el seguimiento de mi pila hasta que reconocí los "accesorios" que se pasaban a un componente y luego encontré el código infractor.
Deberá hacer referencia a una propiedad del objeto que sea un valor de cadena o convertir el objeto en una representación de cadena que sea deseable. Una opción podría ser JSON.stringifysi realmente desea ver el contenido del Objeto.
Recibí este error al intentar mostrar la createdAtpropiedad que es un objeto de fecha. Si concatena .toString()al final de esta manera, realizará la conversión y eliminará el error. Simplemente publico esto como una posible respuesta en caso de que alguien más tenga el mismo problema:
{this.props.task.createdAt.toString()}
Recibí el mismo error pero debido a un error diferente: usé llaves dobles como:
{{count}}
para insertar el valor de counten lugar del correcto:
{count}
en el que presumiblemente se convirtió el compilador {{count: count}}, es decir, intentando insertar un Objeto como hijo de React.
Solo pensé en agregar algo a esto ya que tuve el mismo problema hoy, resulta que fue porque estaba devolviendo solo la función, cuando la envolví en una <div>etiqueta comenzó a funcionar, como se muestra a continuación.
renderGallery() {
const gallerySection = galleries.map((gallery, i) => {
return (
<div>
...
</div>
);
});
return (
{gallerySection}
);
}
Lo anterior causó el error. Solucioné el problema cambiando la return()sección a:
return (
<div>
{gallerySection}
</div>
);
...o simplemente:
return gallerySection
