Объясните как работает данный код в React?

Question

[Ily4farmer]

Пишу todo list на хуках, надо добавить действие на удаление элемента из массива.
На просторах интернета нашел следующий код
[

const deleteItem = (id) => {
    setTodo(
      todo.filter(item => {
        return item.id !== id
      })
      
    );
  }

]
Но не особо понял как он работает
Объясните пожалуйста как работает этот код, в особенности момент с определением какой элемент требуется удалить: return item.id !== id

Comments

[SkaterDark]

это не удаляет это фильтрует. В принципе можно использовать в твоем случае.
вот фидл jsfiddle.net/SJMxL/2 тренируйся

[Yustas Alexu]

А что там непонятно то? Там всего лишь обычный фильтр по условию. У вас какой бэкграунд, с какого языка вы пришли в Реакт?

Answer 1

[Maxim Kirshin]

Это обычный нативный метод для массивов. К React'у он прямого отношения не имеет.

Смотри по строкам:

const [todo, setTodo] = useState([]) // todo: массив todo'шек. setTodo - сеттер, для изменения переменной todo

const deleteItem = (id) => { // Объявляем функцию deleteItem, которая принимает внутрь id интересующей todo
  setTodo( // Устанавливаем новый state для переменной todo, которую объявили выше
    todo.filter(item => { // Берем текущее состояние переменной todo. 
       // filter как forEach проходится по каждому элементу массива. 
      // Принимает в себя callback вида (item, i, array), где item - текущий элемент (соответствует array[i]), текущий индекс, текущий массив (который обходим)
     // В функции callback'е ты должен вернуть булевое значение (true/false). Если true - элемент остается в массиве, если нет - убирается
      return item.id !== id // Если id элемента не равен id, который хотим удалить - оставляем элемент в массиве, иначе убираем
    })
  );

Чтобы было более ясно вот более простой пример, без state в React:

const products = [
  { id: 1, price: 25 },
  { id: 2, price: 50 },
  { id: 3, price: 75 },
  { id: 4, price: 100 },
  { id: 5, price: 125 },
]

// Оставим продукты, которые только с ценой выше или равной 100
const filteredProducts = products.filter(product => product.price >= 100) // [{ id: 4, price: 100 }, { id: 5, price: 125 }]

}

Answer 2

[VitalyChaikin]

В функцию deleteItem в качестве параметра передается (id) элемента для удаления;
Далее вызываем setTodo( ЭлементДляУдаления )
ЭлементДляУдаления мы находим с помощью todo.filter() по условию item.id !== id

Comments

[Ily4farmer]

item.id !== id а как работает это условие? Вот как раз этот момент вызывает больше всего вопросов

Answer 3

[coderisimo]

todo.filter(item => {
        return item.id !== id
      })

filter возвращает массив только с теми элементами, для которых ф-ция, переданная в filter вернет true. Т.е она перебирает все элементы и для каждого запускает эту функцию. В вашем случае вы удаляете элемент из массива. Ф-ция, переданная в filter сравнивает id элементов массива с id для удаления. Если id элемента совпадает с id удаляемого элемента - будет возвращено false (item.id !== id) , и данный элемент не попадет в массив , который вернет filter.