Warum erhalte ich in meiner React-App die Meldung „Invariante Verletzung: Objekte sind nicht als React-Kind gültig'?

React-Fehler: Objekte als untergeordnete Elemente

In React-Anwendungen treten Fehler „Invariante Verletzung: Objekte sind als untergeordnetes React-Objekt nicht gültig“ auf, wenn Versuch, ein Objekt als untergeordnetes Element einer Komponente darzustellen. Dieses Problem tritt auf, wenn das Kind eine Zeichenfolge, eine Zahl oder ein Element erwartet, stattdessen aber ein Objekt erhält.

Im gegebenen Beispiel innerhalb der Map-Funktion in der Rendermethode this.onItemClick.bind(this, item ) übergibt fälschlicherweise das gesamte Ereignisobjekt als Eigenschaft an den onClick-Handler. Folglich empfängt der onClick-Ereignishandler das Ereignis mit seinen Eigenschaften als Objekt und löst den Fehler aus.

Um dieses Problem zu beheben, können Sie entweder eine Pfeilfunktion innerhalb der Karte verwenden, um das Klickereignis zu verarbeiten und das erforderliche Argument zu übergeben :

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

Alternativ können Sie, wenn Sie das Ereignisobjekt beibehalten möchten, nur den erforderlichen Parameter binden:

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

Das obige ist der detaillierte Inhalt vonWarum erhalte ich in meiner React-App die Meldung „Invariante Verletzung: Objekte sind nicht als React-Kind gültig'?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!