Warum erhalte ich den Fehler „Invalid React Child', wenn ich ein Array in meiner „render'-Methode zuordne?

React-Fehler: Ungültiges React-Kind

Dieser Fehler tritt auf, wenn die Rendermethode versucht, ein ungültiges React-Kind zu rendern, was bei der Rückgabe passieren kann ein Array oder Objekt anstelle eines gültigen React-Elements.

In Ihrem Fall wird der Fehler durch die Referenzierung der gebundenen Methode this.onItemClick.bind(this, item) direkt innerhalb der Map-Funktion verursacht. Um das Problem zu beheben, sollten Sie stattdessen eine Pfeilfunktion verwenden:

<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>

Die Pfeilfunktion erstellt einen neuen Bereich, in dem dieser Wert an die Komponenteninstanz gebunden ist, sodass Sie auf die onItemClick-Funktion zugreifen können.

Verstehen der Fehlermeldung

Die Fehlermeldung enthält die folgenden Informationen:

• Objekte sind nicht als React-Kind gültig: Zeigt an, dass das ungültige untergeordnete Objekt ein Objekt ist.
• dispatchConfig, packetMarker, nativeEvent, ...: Listet die Eigenschaften des Ereignisobjekts auf, das als erstes Argument an übergeben wird onClick-Handler.
• Überprüfen Sie die Rendermethode von Welcome: Zeigt auf die Komponente, in der der Fehler aufgetreten ist (vorausgesetzt, die Komponente heißt „Welcome“).

Zusätzliche Hinweise

• Bindungspfeilfunktionen: Pfeilfunktionen haben keine eigene Bindung, daher binden sie automatisch an den Bereich, in dem sie definiert sind.
• Status aktualisieren: Sie können den Status der Komponente weiterhin innerhalb der Pfeilfunktion aktualisieren, indem Sie die setState-Methode mit einer Rückruffunktion verwenden:

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

Das obige ist der detaillierte Inhalt vonWarum erhalte ich den Fehler „Invalid React Child', wenn ich ein Array in meiner „render'-Methode zuordne?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!