En mi componente's función de renderización 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 se renderiza bien, sin embargo al hacer clic en el elemento <li>
recibo el siguiente error:
Uncaught Error: Invariant Violation: Los objetos no son válidos como React
child (found: object with keys {dispatchConfig, dispatchMarker, nativeEvent, target, currentTarget, type, eventPhase, bubbles, cancelable, timeStamp, defaultPrevented, isTrusted, view, detail, screenX, screenY, clientX, clientY, ctrlKey, shiftKey, altKey, metaKey, getModifierState, button, buttons, relatedTarget, pageX, pageY, isDefaultPrevented, isPropagationStopped, _dispatchListeners, _dispatchIDs}). Si quieres renderizar una colección de hijos, usa un array en su lugar o envuelve el objeto usando createFragment(object) de React. Comprueba el método de renderización de
Welcome
.
Si cambio this.onItemClick.bind(this, item)
por (e) => onItemClick(e, item)
dentro de la función map todo funciona como se esperaba.
Si alguien pudiera explicar qué estoy haciendo mal y explicar por qué me da este error, sería genial
ACTUALIZACIÓN 1: La función onItemClick es la siguiente y al quitar this.setState el error desaparece.
onItemClick(e, item) {
this.setState({
lang: item,
});
}
Pero no puedo eliminar esta línea ya que necesito actualizar el estado de este componente
Estaba teniendo este error y resultó ser que estaba incluyendo involuntariamente un Objeto en mi código JSX que había esperado que fuera un valor de cadena:
return (
<BreadcrumbItem href={routeString}>
{breadcrumbElement}
</BreadcrumbItem>
)
breadcrumbElement
solía ser una cadena pero debido a un refactorizado se había convertido en un Object. Desgraciadamente, el mensaje de error de React's no hizo un buen trabajo al indicarme la línea donde existía el problema. Tuve que seguir el rastro de la pila hasta que reconocí las "props" que se pasaban a un componente y entonces encontré el código infractor.
Tendrás que hacer referencia a una propiedad del objeto que sea un valor de cadena o convertir el objeto a una representación de cadena que sea deseable. Una opción podría ser JSON.stringify
si realmente quieres ver el contenido del Objeto.
Así que obtuve este error al tratar de mostrar la propiedad createdAt
que es un objeto Date. Si se concatena .toString()
al final así, se hará la conversión y se eliminará el error. Sólo publico esto como una posible respuesta en caso de que alguien más se encuentre con el mismo problema:
{this.props.task.createdAt.toString()}
Gracias a un comentario de zerkms, pude darme cuenta de mi estúpido error:
Tenía onItemClick(e, item)
cuando debería haber tenido onItemClick(item, e)
.