Dans la fonction de rendu de mon composant j'ai :
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>
);
}
tout est bien rendu, mais lorsque je clique sur l'élément "li", je reçois l'erreur suivante :
Unecaught Error : Invariant Violation : Les objets ne sont pas valides en tant que React child (found : object with keys {dispatchConfig, dispatchMarker, nativeEvent, target, currentTarget, type, eventPhase, bulles, 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 vous avez l'intention d'effectuer le rendu d'une collection d'enfants, utilisez plutôt un tableau ou enveloppez l'objet en utilisant createFragment(object) à partir de les modules complémentaires de React. Vérifiez la méthode de rendu de
Welcome
.
Si je change this.onItemClick.bind(this, item)
en (e) => onItemClick(e, item)
à l'intérieur de la fonction map, tout fonctionne comme prévu.
Si quelqu'un pouvait m'expliquer ce que je fais mal et pourquoi j'obtiens cette erreur, ce serait formidable.
MISE À JOUR 1 : La fonction onItemClick est la suivante et la suppression de this.setState entraîne la disparition de l'erreur.
onItemClick(e, item) {
this.setState({
lang: item,
});
}
Mais je ne peux pas supprimer cette ligne car j'ai besoin de mettre à jour l'état de ce composant.
J'avais cette erreur et il s'est avéré que j'incluais involontairement un objet dans mon code JSX alors que je m'attendais à une valeur de type chaîne :
return (
<BreadcrumbItem href={routeString}>
{breadcrumbElement}
</BreadcrumbItem>
)
breadcrumbElement
était une chaîne de caractères mais, suite à une refactorisation, il est devenu un Object. Malheureusement, le message d'erreur de React n'a pas réussi à m'indiquer la ligne où se trouvait le problème. J'ai dû suivre la trace de ma pile jusqu'à ce que je reconnaisse le "props" ; passé dans un composant, puis j'ai trouvé le code incriminé.
Vous devez soit référencer une propriété de l'objet qui est une valeur de chaîne de caractères, soit convertir l'objet en une représentation de chaîne de caractères souhaitable. Une option pourrait être JSON.stringify
si vous voulez réellement voir le contenu de l'objet.
J'ai donc obtenu cette erreur en essayant d'afficher la propriété createdAt
qui est un objet Date. Si vous concaténer .toString()
à la fin comme ceci, cela fera la conversion et éliminera l'erreur. Je poste juste ceci comme une réponse possible au cas où quelqu'un d'autre rencontrerait le même problème :
{this.props.task.createdAt.toString()}
Grâce à un commentaire de zerkms, j'ai pu constater ma stupide erreur :
J'avais mis onItemClick(e, item)
alors que j'aurais dû avoir onItemClick(item, e)
.