Использование соединения для обновления состояния в React

Question

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

Чтобы удалить элемент из массива, просто выполните:

array.splice (index, 1); В вашем случае:

removePeople(e) {
  var array = [...this.state.people]; // make a separate copy of the array
  var index = array.indexOf(e.target.value)
  if (index !== -1) {
    array.splice(index, 1);
    this.setState({people: array});
  }
},

Ожидается: как и во многих других блогах, мы использовали метод фильтра для удаления элементов из списка. почему ответ получает голосование, а мы не используем здесь метод фильтра?

Answer 1

Нет таких правил, как использовать этот метод для этого и этот метод для этого.Однако необходимо выполнить два условия, чтобы гарантировать, что React знает об изменениях состояния.

1. Используйте setState для обновления состояния
2. Ключи верхнего уровня в объекте состояниядолжны быть установлены с новыми значениями или ссылками.Т.е. при мелком сравнении выглядят иначе.

Принятый вами ответ отвечает обоим этим требованиям.Ключевая строка:

var array = [...this.state.people]    // make a separate copy of the array

Обратите внимание на комментарий.Оригинальный плакат прояснил, что он создает новую ссылку на массив, используя синтаксис .Операция сплайсинга, которую он выполняет позже, находится в этом новом массиве, не имеет значения, какую операцию он выполняет позже, React будет вызывать метод рендеринга по крайней мере один раз, когда новый массив задан как часть состояния.

Почему фильтр?

Фильтр фильтрует массив по предикату и возвращает новый объект массива с результатами.В некоторых ситуациях это может быть более гибким и удобным в использовании, но имеет совершенно другое поведение.Splice позволяет точно удалять непрерывный блок элементов по индексу, тогда как фильтр удаляет все элементы, которые не соответствуют предикату.

Решение об использовании, которое остается за вами, зависит от того, что лучше для варианта использования.React будет выполнять рендеринг до тех пор, пока выполняются вышеуказанные условия.

Примечание: В представленной ситуации фильтр будет предпочтительным выбором, так как он только циклически повторяется по массиву один раз.Операция сплайсинга требует, распространение и indexOf перед ней, что приводит к множественным перечислениям в массиве.

Answer 2

В приведенном выше примере используется оператор распространения, который является более новой функцией,

Если вы хотите использовать метод фильтрации, который у вас есть, у вас есть выбор, что выбрать

Когда метод фильтра будет лучше?

В случае, если вы хотите удалить дубликаты элементов на основе условия не только одного, если у вас есть такой случай, ясно, что вы хотите отфильтровать все

Если у вас вопрос, почему он помечен как принятый?

Ответ довольно ясен и зависит от человека, который спрашивает, может быть, он подходит ему с помощью новых функций