@Ily4farmer

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

Пишу todo list на хуках, надо добавить действие на удаление элемента из массива.
На просторах интернета нашел следующий код
[
const deleteItem = (id) => {
    setTodo(
      todo.filter(item => {
        return item.id !== id
      })
      
    );
  }
]
Но не особо понял как он работает
Объясните пожалуйста как работает этот код, в особенности момент с определением какой элемент требуется удалить: return item.id !== id
  • Вопрос задан
  • 93 просмотра
Пригласить эксперта
Ответы на вопрос 3
meowto16
@meowto16
Делаю штуки
Это обычный нативный метод для массивов. К 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 }]

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


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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы