Schleife durch ein Objekt in React

Dieses Tutorial demonstriert die Verwendung der Methoden forEach(), Object.keys und map(), um ein Objekt in React zu durchlaufen.

Schleife durch ein Objekt in React

In React verwenden wir oft die Methode .map(), um Komponenten (oder DOM-Elemente) zu generieren, indem wir Daten aus dem Array nehmen.

Wenn Sie beispielsweise einen E-Commerce-Shop betreiben, könnten Sie über ein Array von Objekten verfügen, wobei jedes Objekt detaillierte Informationen zu einem Produkt enthält. Dann würden Sie dieses Array durchlaufen, um Komponenten für jedes Produkt zu generieren.

In React ist das Generieren von Komponenten durch das Durchgehen von Elementen im Array eine Standardoperation. Das Schleifen durch ein Objekt ist jedoch etwas komplizierter und erfordert zusätzliche Schritte.

Lassen Sie uns lernen, wie?

Verwenden Sie Object.keys() & map(), um ein Objekt in React zu durchlaufen

Zuerst müssen Sie das Array der Object-Eigenschaften mit der Object.keys()-Methode generieren, die das Objekt als Argument verwendet.

Dann können Sie die Methode .map() mit diesem Array verwenden und benutzerdefinierte Komponenten für jede Eigenschaft generieren. Schauen wir uns dieses Beispiel an:

export default function App() {
  const person = {
    firstName: "Irakli",
    lastName: "Tchigladze",
    age: 24,
    occupation: "writer"
  };
  return (
    <div className="App">
      {Object.keys(person).map((key) => (
        <h1>{key + " - " + person[key]}</h1>
      ))}
    </div>
  );
}

Hier haben wir ein person-Objekt mit vier Eigenschaften, um die Person zu beschreiben. Innerhalb von JSX verwenden wir die Methode Object.keys(), um die Liste aller Objekteigenschaften zu erhalten.

Dann verwenden wir eine .map()-Methode, um ein neues Array von <h1>-Elementen zurückzugeben, die die Objekteigenschaft und ihren Wert anzeigen. Siehe die Ausgabe unten.

Ausgang:

firstName - Irakli
lastName - Tchigladze
age - 24
occupation - writer

Verwenden Sie die forEach()-Methode, um ein Objekt in React zu durchlaufen

Sie können die Eigenschaften eines Objekts auch erfolgreich durchlaufen, indem Sie die Methode forEach() verwenden. Zunächst ist es jedoch wichtig, das Verhalten dieser Methode zu verstehen.

Sie gibt kein neues Array zurück, das aus geänderten Elementen besteht, wie dies bei der Methode .map() der Fall ist. Stattdessen müssen wir ein neues Array erstellen, jedes Element im Array ändern und die Methode push() verwenden, um das geänderte Element dem neuen Array hinzuzufügen.

Sehen wir uns ein Beispiel unten an:

const modifiedArray = [];
  Object.keys(person).forEach(function (key) {
    modifiedArray.push(<h1>{key + " - " + person[key]}</h1>);
  });

Dann können Sie das modifiedArray innerhalb von JSX wie folgt referenzieren:

<div className="App">{modifiedArray}</div>