Languages
[Edit]
DE

React - Array als Komponentenzustand

3 points
Created by:
Nikki
10520

In diesem Artikel wird gezeigt, wie man Arrays als Zustand in React verwenden und dann einige Elemente, basierend auf diesem Array, rendern. 

Die h√§ufigsten Probleme f√ľr Anf√§nger in React beim Versuch, Arrays zu verwenden, sind:

  • kein eindeutiger Schl√ľssel f√ľr jedes Element im Array,
  • das Array √§ndern und den Zustand der Komponente nach der √Ąnderung aktualisieren.

In diesem Artikel werden 4 grundlegende Operationen auf Arrays gezeigt:

  1. Elemente auf der Basis von Array-Elementen zu rendern,
  2. Elemente hinzuf√ľgen,¬†
  3. Elemente zu löschen,
  4. Elemente zu modifizieren.

Hinweis: die folgenden Lösungen sind eine Zusammenfassung der meist verwendeten Praktiken.

1. Rendern von Elementen auf Basis von Array-Elementen - Beispiel

Es ist sehr¬†wichtig, dass jedes Element seinen eigenen, eindeutigen Schl√ľssel hat - das erm√∂glicht eine optimale Erkennung von √Ąnderungen im DOM-Baum. Um durch das Array zu iterieren, kann man die in JavaScript integrierte Funktion¬†map()¬†verwenden.

// ONLINE-RUNNER:browser;
// import React from "react";
// import ReactDOM from "react-dom";

const App = () => {
  const [list, setList] = React.useState(['eins', 'zwei', 'drei']);
  return (
    <ul>
      {list.map(item => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
};

const root = document.querySelector('#root');
ReactDOM.render(<App />, root );

2. Hinzuf√ľgen von Elementen in einem Array - Beispiel¬†

Um React √ľber eine Zustands√§nderung zu informieren, muss man eine andere Referenz als die aktuell an den Zustand √ľbergeben. So kann man dank der Operation¬†[...list, newItem], die ein neues Objekt mit denselben Elementen zur√ľckgibt, ein Element zum Array hinzuf√ľgen.

// ONLINE-RUNNER:browser;

// import React from "react";
// import ReactDOM from "react-dom";

const App = () => {
  const [list, setList] = React.useState(['eins', 'zwei', 'drei']);
  const handleAddClick = () => {
    const number = list.length + 1;
    setList([...list, 'hinzugef√ľgt' + number]);
  };
  return (
    <div>
      <ul>
        {list.map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
      <button onClick={handleAddClick}>Element hinzuf√ľgen</button>
    </div>
  );
};

const root = document.querySelector('#root');
ReactDOM.render(<App />, root );

Hinweis: Bei der Verwendung der Methode¬†list.push()¬†kann man keine √Ąnderung an der Komponente sehen, weil die als Status gespeicherte Referenz nicht ge√§ndert wird - die Komponente wird nur neu gerendert, wenn die Referenz oder der Wert im Status ge√§ndert wird.¬†

3. Löschen von Elementen aus einem Array - Beispiel 

Eine der einfachsten Vorgehensweise, um Elemente aus einem Array zu entfernen und zu kopieren, ist die Verwendung der Methode filter().

// ONLINE-RUNNER:browser;

// import React from "react";
// import ReactDOM from "react-dom";

const App = () => {
  const [list, setList] = React.useState(['eins', 'zwei', 'drei']);
  const handleRemoveClick = () => {
    setList(list.filter((item, index) => item !== 'zwei'));
  };
  return (
    <div>
      <ul>
        {list.map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
      <button onClick={handleRemoveClick}>Element löschen 'zwei'</button>
    </div>
  );
};

const root = document.querySelector('#root');
ReactDOM.render(<App />, root );

4. Modifizieren von Elementen in einem Array - Beispiel

Mit der Methode map() kann man Elemente in ein neues Array umschreiben und nur ausgewählte Elemente darin ändern.

// ONLINE-RUNNER:browser;

// import React from "react";
// import ReactDOM from "react-dom";

const App = () => {
  const [list, setList] = React.useState(['eins', 'zwei', 'drei']);
  const handleRemoveClick = () => {
    setList(list.map((item, index) => item === 'zwei' ? 'der neue Wert im zweiten Element' : item));
  };
  return (
    <div>
      <ul>
        {list.map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
      <button onClick={handleRemoveClick}>Element löschen 'zwei'</button>
    </div>
  );
};

const root = document.querySelector('#root');
ReactDOM.render(<App />, root );

Alternative titles

  1. React - Verwendung von Arrays als Zustand
Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.

ReactJS (DE)

Native Advertising
ūüöÄ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

‚̧ԳŹūüíĽ ūüôā

Join