Pourquoi est-ce que j'obtiens l'erreur « Invalid React Child » lors du mappage d'un tableau dans ma méthode « render » ?

Erreur React : enfant React non valide

Cette erreur se produit lorsque la méthode de rendu tente de restituer un enfant React non valide, ce qui peut se produire lors du retour un tableau ou un objet au lieu d'un élément React valide.

Dans votre cas, l'erreur est provoquée par le référencement de la méthode liée this.onItemClick.bind(this, item) directement dans la fonction map. Pour résoudre ce problème, vous devez plutôt utiliser une fonction flèche :

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

    // ...
}</code>

La fonction flèche crée une nouvelle portée où cette valeur est liée à l'instance du composant, vous permettant d'accéder à la fonction onItemClick.

Comprendre le message d'erreur

Le message d'erreur comprend les informations suivantes :

• Les objets ne sont pas valides en tant qu'enfant React : Indique que l'enfant non valide est un objet.
• dispatchConfig, dispatchMarker, nativeEvent, ...: Répertorie les propriétés de l'objet événement, qui est transmis comme premier argument au Gestionnaire onClick.
• Vérifiez la méthode de rendu de Welcome : Pointe vers le composant où l'erreur s'est produite (en supposant que le composant est nommé "Welcome").

Remarques supplémentaires

• Fonctions de flèche de liaison : Les fonctions de flèche n'ont pas leur propre liaison, elles se lient donc automatiquement à la portée où elles sont définies.
• Mise à jour de l'état : Vous pouvez toujours mettre à jour l'état du composant dans la fonction de flèche en utilisant la méthode setState avec une fonction de rappel :

<code class="javascript">onClick={(e) => this.setState((prevState) => ({ lang: item }))}</code>

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!