Reagieren Sie auf native Foreach-Schleife

1. Verwenden Sie die map()-Methode, um das Array in React-Native zu durchlaufen
2. Verwenden Sie die map()-Methode, um ein Array von Objekten zu durchlaufen
3. Abschluss

Manchmal müssen Entwickler Objekte wie Arrays durchlaufen und kleine Komponenten erstellen, während sie mit React-native arbeiten. In Vanilla-JavaScript können wir mit der foreach-Schleife durch jedes Array-Element iterieren, aber React unterstützt dies nicht.

Es gibt mehrere andere Möglichkeiten, die Elemente des Arrays in React zu durchlaufen, die wir in diesem Artikel kennenlernen werden.

Verwenden Sie die map()-Methode, um das Array in React-Native zu durchlaufen

In React-native funktioniert die map()-Methode des Arrays genauso wie die foreach-Methode. Es durchläuft jedes Element, und Benutzer können mit jedem Array-Element einige Operationen ausführen.

Im folgenden Beispiel haben wir den Array-Namen message erstellt, der die Willkommensnachricht für Benutzer enthält. Wir verwenden die map, um das Array zu durchlaufen und jedes Element des Arrays mit der Text-Komponente zu rendern.

Beispielcode:

import { StyleSheet, Text, View } from "react-native";
export default function App() {
  const message = ["Welcome", "To", "DelftStack", "!"];
  return (
    <View>
      <Text style={{ fontSize: 30 }}>
        Displaying the Welcome Message Using the Map
      </Text>{" "}
      {/* Display all array elements in a single row */}
      <View style={{ flexDirection: "row", }}>
      {message.map((post) => {
        return <Text style={{ fontSize: 20 }}>{post} </Text>;
      })}
      </View>
    </View>
  );
}

Ausgang:

In der obigen Ausgabe können Benutzer beobachten, dass alle Elemente in einer einzigen Zeile angezeigt werden. Wenn Entwickler die map()-Methode nicht verwenden, müssen sie für jedes message element die Text-Komponente erstellen, was den Code unübersichtlich macht.

Verwenden Sie die map()-Methode, um ein Array von Objekten zu durchlaufen

Nun lernen wir die Echtzeit-Nutzung der map()-Methode des Arrays kennen. Angenommen, Entwickler entwickeln eine Anwendung, in der sie die Daten von Büchern aus der Datenbank abrufen und Bücher und Autor Zeile für Zeile anzeigen müssen.

Hier rufen wir keine Buchdaten ab, aber wir haben ein Array von Objekten erstellt, das den Autor und den Titel des Buchs enthält. Danach verwenden wir die Methode map(), indem wir auf das Array books verweisen, das die Komponente Text mit den Buchdetails zurückgibt.

Beispielcode:

import { StyleSheet, Text, View } from "react-native";
export default function App() {
  const books = [
    {
      author: "jack",
      Title: "Book 1",
    },
    {
      author: "mack",
      Title: "Book 2",
    },
    {
      author: "Shubham",
      Title: "Book 3",
    },
    {
      author: "jem",
      Title: "Book 4",
    },
  ];
  return (
    <View>
      <Text style={{ fontSize: 30 }}>
        Showing the Book Title and its author name
      </Text>{" "}
      {/* Display all array elements one by one */}
      <View>
        {books.map((book) => {
          return <Text style={{ fontSize: 20 }}>{book.Title} by {book.author}</Text>;
        })}
      </View>
    </View>
  );
}

Ausgang:

Abschluss

In diesem Artikel haben die Leser gelernt, das Array von Elementen in React Native zu durchlaufen. Wenn Benutzer das Array innerhalb des return-Teils durchlaufen möchten, verwenden Sie die map()-Methode.

Andernfalls können Benutzer die Methode foreach verwenden.