Schleife durch ein Array von Objekten in React

1. Durchlaufen Sie ein Array von Objekten in JSX
2. Verwenden Sie .map(), um ein Array von Objekten in React zu durchlaufen
3. Verwenden Sie forEach(), um ein Array von Objekten in React zu durchlaufen
4. Verwenden Sie for, um eine Reihe von Objekten in React zu durchlaufen

React ist ein beliebtes Front-End-Framework, da es Entwicklern alle Funktionen bietet, die zum Erstellen schneller, leistungsstarker Webanwendungen erforderlich sind.

Durchlaufen Sie ein Array von Objekten in JSX

JSX ist die Standard-Template-Sprache für React. Es sieht sehr nach HTML aus, ist aber in Wirklichkeit einfach eine bequeme Möglichkeit, JavaScript-Code zu schreiben.

Aus diesem Grund können React-Entwickler gängige JavaScript-Methoden innerhalb von JSX verwenden, solange sie geschweifte Klammern verwenden, um JavaScript-Ausdrücke zu markieren.

Verwenden Sie .map(), um ein Array von Objekten in React zu durchlaufen

Front-End-Entwickler müssen normalerweise schöne Benutzeroberflächen erstellen, um Daten anzuzeigen, die sie von externen Quellen erhalten. Daten können auf verschiedene Weise formatiert werden.

Wenn Sie jedoch Daten von Beiträgen, Produktlisten oder ähnlichen Elementen haben, werden diese höchstwahrscheinlich als Array von Objekten formatiert. Jedes Objekt enthält Informationen über das Element: seinen Titel, Hauptinhalt, Meta-Tags, Titelbild und so weiter.

Als React-Entwickler können Sie problemlos eine Reihe von Objekten durchlaufen. Sie müssen die JavaScript-Methode .map() verwenden, die jedes Element im Array durchgeht und jedes geänderte Element ausgibt.

Schauen wir uns ein Beispiel an:

export default function App() {
  const postsArray = [
    {
      title: "How to Learn React",
      content:
        "React is built on JavaScript, so there is no escaping learning how to code in JavaScript. You need to know the basics of JavaScript and have a good knowledge of HTML and CSS to get started with React. "
    },
    {
      title: "How to Learn Vue",
      content:
        "First, learn the essentials of Vue 2.0 by going through the main concepts and syntax. Then, build your first single-page app with Vue. "
    },
    {
      title: "How to Learn HTML",
      content:
        "Codecademy has numerous free programs to provide you with the technical skills you need. ...Learn-HTML.org is a reliable source for everything you need to know about HTML."
    }
  ];
  return (
    <div className="App">
      <h1>Coding Blog</h1>
      {postsArray.map((post) => {
        return <Post post={post}></Post>;
      })}
    </div>
  );
}
function Post(props) {
  return (
    <div>
      <h1>{props.post.title}</h1>
      <p>{props.post.content}</p>
    </div>
  );
}

Hier haben wir zwei Komponenten: die übergeordnete Komponente <App> und die untergeordnete Komponente <Post>. In der übergeordneten Komponente definieren wir eine postsArray-Variable, um externe Daten zu simulieren, die Sie möglicherweise von der API erhalten.

Unsere App ist ziemlich einfach: In der Hauptkomponente <App> haben wir einen Header für den Blog. Wir verwenden auch die Methode .map(), um jedes Element im Array zu überprüfen.

Wie bereits erwähnt, ermöglicht uns die Methode .map(), eine modifizierte Version jedes Elements auszugeben. In unserem Fall ist jedes Element ein Objekt, das Beitragsdaten enthält: Titel und Inhalt.

Wir nehmen jedes Objekt und übergeben es als Requisiten an die Komponente <Post>.

Wir greifen auf Daten zu, die wir über Requisiten in der untergeordneten Komponente erhalten haben, und zeigen sie als Kopfzeile und Absatz an.

Wenn Sie sich die Live-Demo auf CodeSandbox ansehen, werden Sie sehen, dass unsere .map()-Methode drei <Post>-Komponenten zurückgibt. Eine Komponente für jedes Objekt im Array.

Es ist wichtig, sich die Syntax der Funktion .map() anzusehen. Wir beginnen damit, öffnende und schließende geschweifte Klammern zu schreiben, damit wir auf eine Variable verweisen können, die das Array enthält.

Dann rufen wir die Methode .map() für das Array auf und geben ihr Argument an – eine Callback-Funktion, um jedes Element im Array zu durchlaufen. Wenn wir schließlich JSX- oder HTML-Elemente zurückgeben, müssen wir Daten in jedem Element des Arrays (die Objekte sind) verwenden, um den Inhalt jedes zurückgegebenen Elements zu füllen.

Verwenden Sie forEach(), um ein Array von Objekten in React zu durchlaufen

Die Array-Methode forEach() bietet eine Alternative zum Schreiben ausführlicher for-Schleifen. Sie können es auch in React verwenden.

forEach() kann keine HTML-Elemente zurückgeben, aber Sie können HTML-Elemente generieren und sie in ein Array einfügen. Dann können Sie auf dieses Array in JSX verweisen, um die von Ihnen erstellten Elemente anzuzeigen.

export default function App() {
  const postsArray = [
    {
      title: "How to Learn React",
      content:
        "React is built on JavaScript, so there is no escaping learning how to code in JavaScript. You need to know the basics of JavaScript and have a good knowledge of HTML and CSS to get started with React. "
    },
    {
      title: "How to Learn Vue",
      content:
        "First, learn the essentials of Vue 2.0 by going through the main concepts and syntax. Then, build your first single-page app with Vue. "
    },
    {
      title: "How to Learn HTML",
      content:
        "Codecademy has numerous free programs to provide you with the technical skills you need. ...Learn-HTML.org is a reliable source for everything you need to know about HTML."
    }
  ];
  const posts = []
  postsArray.forEach(post => posts.push(<div>
                                          <h1>{post.title}</h1>
                                          <p>{post.content}</p>
                                        </div>)
                    )
  return (
    <div className="App">
      <h1>Coding Blog</h1>
      {posts}
    </div>
  );
}

Verwenden Sie for, um eine Reihe von Objekten in React zu durchlaufen

Die for-Anweisung ist die primäre Methode, um ein Array von Objekten in JavaScript zu durchlaufen. Sie können es jedoch nicht zum Rendern von Elementen innerhalb von JSX verwenden. Aus diesem Grund sollten Sie außerhalb von JSX eine for-Schleife definieren.

Stellen wir uns zum Beispiel vor, wir haben das gleiche Array von Beiträgen wie im vorherigen Beispiel.

export default function App() {
  const postsArray = [
    {
      title: "How to Learn React",
      content:
        "React is built on JavaScript, so there is no escaping learning how to code in JavaScript. You need to know the basics of JavaScript and have a good knowledge of HTML and CSS to get started with React. "
    },
    {
      title: "How to Learn Vue",
      content:
        "First, learn the essentials of Vue 2.0 by going through the main concepts and syntax. Then, build your first single-page app with Vue. "
    },
    {
      title: "How to Learn HTML",
      content:
        "Codecademy has numerous free programs to provide you with the technical skills you need. ...Learn-HTML.org is a reliable source for everything you need to know about HTML."
    }
  ];
  const posts = []
  for (let i = 0; i < postsArray.length; i++){
      posts.push(<div>
                     <h1>{postsArray[i].title}</h1>
                     <p>{postsArray[i].content}</p>
                 </div>)
  }
  return (
    <div className="App">
      <h1>Coding Blog</h1>
      {posts}
    </div>
  );
}

In diesem Beispiel erstellen wir HTML-Elemente, indem wir jedes Element in der Variablen postArray iterieren. Wir pushen HTML-Elemente in das neu erstellte posts-Array.

Wir können die for-Schleife in JSX nicht verwenden. Stattdessen verweisen wir auf die Variable posts, die HTML-Elemente enthält, die wir mit Daten aus der Statusvariablen postArray generiert haben.

Verwenden Sie die for...of-Syntax, um ein Array von Objekten in React zu durchlaufen

Entwickler können die for-Schleife im vorherigen Beispiel durch die neue, besser lesbare Syntax zum Durchlaufen eines Arrays ersetzen:

const posts = []
for (let post of postsArray){
    posts.push(<div><h1>{post.title}</h1></div>)
}

Dies ist ein besser lesbarer Ansatz. Alle anderen Teile des Codes können gleich bleiben.