Languages
[Edit]
DE

React - Array als Komponentenzustand

3 points
Created by:
Nikki
10100

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 );

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