No meu componente's função render que eu tenho:
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>
);
}
tudo fica bem, porém ao clicar no elemento <li>
eu recebo o seguinte erro:
Uncaught Error: Violação Invariante: Objetos não são válidos como Reação child (encontrado: objeto com chaves {dispatchConfig, dispatchMarker, nativeEvent, target, currentTarget, type, eventPhase, bubbles, cancelável, timeStamp, defaultPrevente, isTrusted, view, detail, screenX, screenY, clientX, clientY, ctrlKey, shiftKey, altKey, metaKey, getModifierState, botão, botões, relatedTarget, pageX, pageY, isDefaultPrevented, isPropagationStopped, _dispatchListeners, _dispatchIDs}). Se você pretendia renderizar uma coleção de crianças, use um array ou envolva o objeto usando createFragment(object) de os add-ons do React. Verifique o método de renderização do `Welcome'.
Se eu mudar para this.onItemClick.bind(this, item)
para (e) => onItemClick(e, item)
dentro da função de mapa, tudo funciona como esperado.
Se alguém pudesse explicar o que estou a fazer mal e explicar porque é que recebo este erro, seria óptimo.
ATUALIZAÇÃO 1: A função onItemClick é a seguinte e a remoção deste.setState resulta no desaparecimento do erro.
onItemClick(e, item) {
this.setState({
lang: item,
});
}
Mas não posso remover esta linha, pois preciso de actualizar o estado deste componente
Eu estava a ter este erro e acabou por ser que eu estava involuntariamente a incluir um Objecto no meu código JSX que eu esperava que fosse um valor string:
return (
<BreadcrumbItem href={routeString}>
{breadcrumbElement}
</BreadcrumbItem>
)
O breadcrumbElement
costumava ser uma corda, mas devido a um refactor tinha-se tornado um Objecto. Infelizmente, a mensagem de erro do React's não fez um bom trabalho em me apontar para a linha onde o problema existia. Eu tive que seguir meu stack trace até reconhecer o "props" sendo passado para um componente e então eu encontrei o código ofensivo.
Você'precisará ou referenciar uma propriedade do objeto que é um valor string ou converter o objeto em uma representação string que é desejável. Uma opção pode ser `JSON.stringify' se você realmente quiser ver o conteúdo do Objeto.
Então eu recebi este erro ao tentar exibir a propriedade createdAt
que é um objeto Date. Se você concatenar .toString()
no final assim, ele fará a conversão e eliminará o erro. Apenas poste isto como uma resposta possível no caso de alguém mais se deparar com o mesmo problema:
{this.props.task.createdAt.toString()}
Graças ao um comentário de zerkms, pude perceber o meu erro estúpido:
Eu tinha onItemClick(e, item)
quando deveria ter tido onItemClick(item, e)
.