React - tablica jako stan komponentu

W tym artykule chcielibyśmy pokazać, jak używać tablic jako stanu w React, a później wyrenderować kilka elementów na bazie tej tablicy. 

Najczęstszymi problemami początkujących użytkowników Reacta podczas próby korzystania z tablic są:

• brak unikalnego klucza dla każdego elementu tablicy,
• zmodyfikowanie tablicy i odświeżenie stanu komponentu po modyfikacji.

W tym artykule chcielibyśmy pokazać Ci 4 podstawowe operacje na tablicach:

1. renderowanie elementów na podstawie elementów tablicy,
2. dodawanie elementów,
3. usuwanie elementów,
4. modyfikowanie elementów.

Uwaga: poniższe rozwiązania są podsumowaniem najczęściej stosowanych praktyk.

1. Renderowanie elementów na podstawie elementów tablicy - przykład

Bardzo ważne jest to, aby każdy element miał swój unikalny klucz - umożliwia to optymalne wykrywanie zmian w drzewie DOM. Do iteracji po tablicy możemy użyć funkcji map() wbudowanej w JavaScript .

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

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

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

2. Dodawanie elementów do tablicy - przykład

Aby powiadomić Reacta o zmianie stanu, musimy przekazać do stanu referencję inną niż aktualna. To sprawia, że ​​możemy dodać element do tablicy dzięki operacji [...list, newItem], która zwracająca nowy obiekt z tymi samymi elementami).

// ONLINE-RUNNER:browser;

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

const App = () => {
  const [list, setList] = React.useState(['jeden', 'dwa', 'trzy']);
  const handleAddClick = () => {
    const number = list.length + 1;
    setList([...list, 'dodano ' + number]);
  };
  return (
    <div>
      <ul>
        {list.map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
      <button onClick={handleAddClick}>Dodaj element</button>
    </div>
  );
};

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

Pamiętaj: używając metody list.push() nie zobaczymy żadnej zmiany komponentu, ponieważ referencja przechowywana jako stan nie zostanie zmieniona - komponent jest ponownie renderowany tylko po zmianie referencji lub wartości w stanie.

3. Usuwanie elementów z tablicy - przykład

Jednym z najprostszych sposobów usunięcia elementów z tablicy i skopiowania ich jest użycie metody filter().

// ONLINE-RUNNER:browser;

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

const App = () => {
  const [list, setList] = React.useState(['jeden', 'dwa', 'trzy']);
  const handleRemoveClick = () => {
    setList(list.filter((item, index) => item !== 'dwa'));
  };
  return (
    <div>
      <ul>
        {list.map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
      <button onClick={handleRemoveClick}>Usuń element 'dwa'</button>
    </div>
  );
};

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

4. Modyfikacja elementów w tablicy - przykład

Przy pomocy metody map() jesteśmy w stanie przepisać elementy do nowej tablicy i zmienić w niej tylko wybrane pozycje.

// ONLINE-RUNNER:browser;

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

const App = () => {
  const [list, setList] = React.useState(['jeden', 'dwa', 'trzy']);
  const handleRemoveClick = () => {
    setList(list.map((item, index) => item === 'dwa' ? 'nowa wartość w drugim elemencie' : item));
  };
  return (
    <div>
      <ul>
        {list.map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
      <button onClick={handleRemoveClick}>Usuń element 'dwa'</button>
    </div>
  );
};

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