Как работает функция полной проверки в ReactJs?

Question

Я составляю список дел, и я не совсем понимаю всю эту функцию полной проверки, например, откуда этот элемент, и поэтому ... может ли кто-нибудь помочь мне объяснить! Большое вам спасибо за помощь!

Это функция:

      const handleComplete = (todo) => {
    setTodos(
        todos.map((item) => {
            if(item.id === todo.id){
                return {...item, completed: !item.completed}
            }
            return item
        })
    )
}

Answer 1

Это функция, которая создает и возвращает новый массив, заполненный элементами, являющимися результатами функции, вызываемой для каждого элемента в массиве:

      //[array] [element]     [transformed  element inserted in result array]
//  |        |                               |
//  v        v                               v
todos.map((item) => ({...item, completed: !item.completed}));

Так что независимо от твоего todos массив хранится как элементы, возвращаемый результат будет передан в качестве аргумента в setTodos будет массивом {...item, completed: !item.completed} элементы каждый.

Вы можете узнать больше о Array.prototype.map()в документации MDN .

Обратите внимание, что это чистый Javascript и не имеет ничего общего с React или какой-либо другой фреймворком / библиотекой.

Answer 2

Как предполагает ваш код, вы пытаетесь обновить один элемент из своего списка элементов todos, поэтому, когда ваш handleComplete вызывается функция, передается объект todo, поэтому в setTodos функция, с помощью карты сначала мы находим элемент из коллекции задач, который совпадает с идентификатором переданного объекта задачи.

Если найдем, вернем объект, ...item это помогает сохранить все элементы, присутствующие в объекте элемента, и только обновить complete ключ.

Answer 3

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

В этой функции вы устанавливаете состояние использования setTodos. Здесь мы проверяем, что если item.id равно todo.id затем установите состояние.

И при установке состояния мы сохраняем исходное состояние todos используя это return {...item, completed: !item.completed}

Три точки до item называется деструктуризацией.

Разрушение заданий

Функция карты