Languages
[Edit]
PL

React - tablica jako stan komponentu

3 points
Created by:
Reilly-Collier
860

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

Alternative titles

  1. React - używanie tablic jako stanu
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 (PL)

React - tablica jako stan komponentu
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