Anwendungen der forEach()-Methode in React

Die Einführung der Modern ES6-Version von JavaScript hat uns viele nützliche Funktionen gebracht. Die Methode .forEach() ist nur ein Beispiel.

Wie Sie vielleicht anhand des Namens erraten haben, führt die Methode .forEach() eine Callback-Funktion für jedes Element im Array aus. Dies geschieht, um jedes Element im Array auf die eine oder andere Weise zu transformieren.

In React rendern wir Komponenten oft basierend auf einer Liste. Beispielsweise ist es nicht ungewöhnlich, eine Liste mit Benutzernamen zu haben und jeden von ihnen als Absätze anzuzeigen.

Dabei können Sie sie auch auf andere Weise transformieren, z. B. durch Großschreibung.

Array-Elemente zu Elementen in JSX

JSX ist eine vertraute HTML-ähnliche Syntax, die den Aufwand für die Strukturierung unserer Komponenten reduziert. Letztendlich wird der in JSX geschriebene Code zu einem komplexen Satz von React.createElement()-Methodenaufrufen kompiliert.

Um .forEach() oder andere JavaScript-Methoden innerhalb von JSX zu verwenden, müssen Sie die Ausdrücke zwischen geschweiften Klammern setzen. Dies ist notwendig, damit React alles zwischen geschweiften Klammern als reguläres JavaScript behandelt.

.forEach() in React

In reinem JavaScript ist .forEach() sehr nützlich, um jedes Array-Element zu ändern.

Es ist weniger nützlich, wenn Sie versuchen, Komponenten basierend auf einer Liste in React zu rendern. Es gibt mehrere Gründe, warum React-Entwickler .forEach() nicht zum Rendern von Komponenten verwenden.

Wenn Sie geschweifte Klammern verwenden möchten, um mehrere Komponenten basierend auf einer Liste zu rendern, sollte der Ausdruck zwischen den geschweiften Klammern eine Liste von Komponenten zurückgeben.

Wenn Sie versuchen, zu diesem Zweck .forEach() zu verwenden, werden Sie feststellen, dass nichts gerendert wird. Dies geschieht, weil .forEach() undefiniert zurückgibt.

.forEach() ist von Natur aus nicht darauf ausgelegt, einen Wert zurückzugeben. Sein Hauptzweck besteht darin, jedes Array-Element zu transformieren, aber sonst nichts. Die Methode gibt kein neues Array zurück; es gibt undefined zurück.

Stattdessen verwenden React-Entwickler eine alternative Methode, .map().

.map() als Alternative

ES6 führte auch die Methode .map() ein, die besser geeignet ist, Komponenten basierend auf einer Liste zu rendern.

Wie .forEach() benötigt es ein Argument – ​​eine Funktion, die angibt, wie jedes Element im Array transformiert werden soll. Im Gegensatz zu .forEach() verlässt die map-Methode jedoch das ursprüngliche Array und gibt ein neues zurück, das die transformierten Elemente enthält.

Das ist genau das, was Sie brauchen, um mehrere Komponenten basierend auf einem Array zu rendern.

Schauen wir uns ein Beispiel an:

class App extends Component {
  render() {
    return <div>{[1,2,3].map(number => <h1>{number}</h1>)}</div>;
  }
}

In diesem Beispiel haben wir ein Array von Zahlen, die wir .map() verwenden, um ein neues Array zu erstellen. Das neue Array enthält drei <h1>-Elemente mit den drei Zahlenwerten aus dem ursprünglichen Array.

Wenn Sie die Methode .map() verwenden, ist es auch eine gute Idee, jedem neuen Element ein eigenes key-Prop zu geben. React verwendet den key-Wert, um ein eindeutiges Element zu identifizieren.

So würde der obige Codeblock aussehen, nachdem Sie diesem Muster gefolgt sind:

class App extends Component {
  render() {
    return <div>{[1,2,3].map(number => <h1 key={number}>{number}</h1>)}</div>;
  }
}

Da die Zahlen in unserem Array eindeutig sind, können wir ihren Wert als key verwenden.