Pourquoi est-ce que j'obtiens « Violation invariante : les objets ne sont pas valides en tant qu'enfant React » dans mon application React ?

Erreur React : les objets en tant qu'enfants

Dans les applications React, les erreurs « Violation invariante : les objets ne sont pas valides en tant qu'enfants React » se produisent lorsque tenter de restituer un objet en tant qu'enfant d'un composant. Ce problème survient lorsque l'enfant attend une chaîne, un nombre ou un élément mais reçoit un objet à la place.

Dans l'exemple donné, dans la fonction map de la méthode de rendu, this.onItemClick.bind(this, item ) transmet de manière incorrecte l'intégralité de l'objet événement en tant que propriété au gestionnaire onClick. Par conséquent, le gestionnaire d'événements onClick reçoit l'événement avec ses propriétés en tant qu'objet, déclenchant l'erreur.

Pour résoudre ce problème, vous pouvez soit utiliser une fonction de flèche à l'intérieur de la carte pour gérer l'événement click et transmettre l'argument nécessaire. :

render() {
    const items = ['EN', 'IT', 'FR', 'GR', 'RU'].map((item) => {
      return (<li onClick={(e) => this.onItemClick(e, item)} key={item}>{item}</li>);
    });
    return (
      <div>
        ...
                <ul>
                  {items}
                </ul>
         ...
      </div>
    );
  }

Alternativement, si vous souhaitez conserver l'objet événement, vous pouvez lier uniquement le paramètre nécessaire :

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>
    );
  }

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!