Удаление элемента из массива state в React: removePeople()

Быстрый ответ

Для того, чтобы с лёгкостью удалить элемент из массива в состоянии, используйте метод filter в сочетании с функцией setState. При работе со состоянием в React важно передать новую версию массива без удаляемого элемента, ссылаясь на его уникальный идентификатор:

const removeItemById = (idToRemove) => {
  setState(currentState => currentState.filter(item => item.id !== idToRemove));
};

Вызывайте функцию removeItemById, передавая идентификатор удаляемого элемента. Так, метод filter оставит в массиве только те элементы, идентификаторы которых не совпадают с указанным id.

Священное правило иммутабельности данных

React основывается на принципе: "мутации состояния — это плохо". Суть этого принципа кроется в том, что React использует поверхностное сравнение в виртуальном DOM для отслеживания изменений. Мутации могут вызывать неожиданные ошибки и снижать производительность работы с React.

«Войны клонов»: одерживаем победу с помощью оператора расширения

Для сохранения данных в первозданном виде, создайте клон массива с использованием оператора расширения перед внесением изменений:

const removeItemByIndex = (indexToRemove) => {
  // Как "волшебный удар" по массиву
  setState(prevState => [
    ...prevState.slice(0, indexToRemove),
    ...prevState.slice(indexToRemove + 1)
  ]);
};

В итоге, мы получаем новый массив, в котором отсутствует элемент с индексом indexToRemove.

Подробнее об этом расскажет наш спикер на видео

Использовать метод splice — стоит ли?

Что касается метода splice, он весьма полезен для удаления элементов, но его склонность к мутациям может вызвать проблемы. Поэтому, если вы решите использовать splice, обязательно примените его к клону массива, чтобы оригинальное состояние оставалось нетронутым:

// Удаление элементов словно вырезание частей тыквы к Хэллоуину
const removeItemBySplice = (indexToRemove) => {
  setState(prevState => {
    const newArray = [...prevState];
    newArray.splice(indexToRemove, 1);
    return newArray;
  });
};

Визуализация

Представьте, что массив состояния — это поезд, а каждый вагон в нём — это элемент массива:

Исходное состояние поезда: 🚂🚃🚃🚃🚃🚃
Нам нужно удалить третий вагон (с индексом 2).

Применяем операцию Array.prototype.filter:

stateArray = stateArray.filter((item, index) => index !== 2);

И вуаля, как по волшебству наш поезд (массив состояния) обновляется:

Обновленное состояние поезда: 🚂🚃🚃🚃🚃
Третий вагон успешно удален!

Аккуратненько и эффективно! 🚀

Избегаем ловушек в матрице

Проверка перед удалением

Всегда проверяйте наличие элемента перед его удалением. Это поможет избежать ненужных обновлений состояния и потери элементов из массива:

const removeItemIfExist = (itemToRemove) => {
  // Согласитесь, удалять то, чего нет, не имеет смысла
  setState(prevState => {
    const index = prevState.indexOf(itemToRemove);
    return index !== -1 ?
      [
        ...prevState.slice(0, index),
        ...prevState.slice(index + 1)
      ] :
      prevState;
  });
};

Правильная привязка методов

Убедитесь, что методы удаления, например removeItem, привязаны корректно к контексту вашего компонента. Или используйте стрелочные функции, которые сделают это автоматически:

class MyComponent extends React.Component {
  removeItem = (idToRemove) => {
    // Стрелочные функции — защитники контекста!
    this.setState(prevState => (
      prevState.filter(item => item.id !== idToRemove)
    ));
  };

  // ...
}

Удаление, управляемое событием

Для реализации удаления на основе событий, получите целевой элемент через e.target.value из объекта события:

handleRemoveClick = (event) => {
  // Увидимся на следующем событии!
  const idToRemove = event.target.value;
  this.removeItemById(idToRemove);
};

Интеграция с жизненным циклом классовых компонентов

Свяжите функционал удаления с методами жизненного цикла классовых компонентов, чтобы достичь наилучшего результата:

componentDidUpdate(prevProps, prevState) {
  if (this.state.items.length < prevState.items.length) {
    // Вот именно, элемент только что покинул нашу "вечеринку массивов"
  }
}

Полезные материалы

1. Array.prototype.splice() – JavaScript | MDN – Модификация массивов без нарушения состояния.
2. Array.prototype.filter() – JavaScript | MDN – Создание нового массива с помощью фильтрации.
3. State and Lifecycle – React – Обзор управления состоянием и жизненным циклом в React.
4. React.Component – React – Рекомендации по использованию метода setState() для обновления состояния в React.
5. [javascript – How can I update state.item[1] in state using setState? – Stack Overflow](https://stackoverflow.com/questions/29537299/how-can-i-update-state-item1-in-state-using-setstate) – Советы по обновлению состояния в React.
6. Tutorial: Tic-Tac-Toe – React – О важности иммутабельности при управлении состоянием.
7. Immutable Update Patterns | Redux – Паттерны для обновления массивов без изменения их исходного состояния, что является ключевой компонентой эффективного управления состоянием.