Languages
[Edit]
DE

React - Array als Komponentenzustand

3 points
Created by:
Nikki
9950

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