Pourquoi est-ce que j'obtiens l'erreur « Violation invariante : les objets ne sont pas valides en tant qu'enfants React » et comment puis-je la corriger ?

Violation invariante : objets en tant qu'enfants React

La rencontre de l'erreur "Les objets ne sont pas valides en tant qu'enfant React" dans React indique un rendu incorrect des objets quand ils étaient enfants. Pour résoudre ce problème, assurez-vous que tous les éléments de la méthode de rendu sont des nœuds React valides.

Dans le code fourni, l'erreur survient en raison d'une utilisation inappropriée de this.onItemClick.bind(this, item) en tant que gestionnaire d'événements dans la fonction map. Bien que bind soit généralement utilisé pour lier le contexte d'une fonction, dans ce scénario, il restitue involontairement l'objet événement en tant qu'enfant de l'élément li.

Pour résoudre le problème, le gestionnaire d'événements doit être écrit sous la forme d'un fonction de flèche dans la fonction de carte :

<code class="jsx">const items = ['EN', 'IT', 'FR', 'GR', 'RU'].map((item) => {
  return (<li onClick={(e) => onItemClick(e, item)} key={item}>{item}</li>);
});</code>

En encapsulant le gestionnaire d'événements en tant que fonction de flèche, l'objet d'événement n'est plus traité par erreur comme un élément enfant, résolvant l'erreur.

Mise à jour 1 : Présence de mise à jour de l'état

Dans le code mis à jour, la fonction onItemClick inclut un appel setState pour mettre à jour l'état du composant avec l'élément. Si la suppression de cette ligne résout l’erreur, cela suggère qu’il existe un problème avec la logique de mise à jour de l’état. Assurez-vous que l'état du composant est manipulé correctement et que l'état mis à jour ne provoque aucun conflit ni problème de rendu.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!