一个完整的检查功能是如何在ReactJs工作的?

Question

我正在制作一个待办事项列表，我真的不理解这个完整的检查功能，比如项从哪里来等等…有人能帮我解释一下吗?非常感谢你的帮助!

功能如下:

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

Answer 1

Array.prototype.map()是一个函数，它创建并返回一个新的数组，其中的元素是对数组中每个元素调用函数的结果:

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

所以无论你的todos数组保存的是什么元素，返回的结果将作为参数传递给setTodos，将是一个包含{...item, completed: !item.completed}元素的数组。

您可以在MDN文档中阅读更多关于Array.prototype.map()函数的信息。

注意这是纯的Javascript，与React或任何其他框架/库无关。

Answer 2

正如您的代码所建议的，您正在尝试从todos元素列表中更新单个项目，因此当您的handleComplete函数被调用时，传递todo对象，因此在setTodos函数中，首先在映射的帮助下，我们从todos集合中找到与传递的todo对象id匹配的项目。

如果找到，我们将返回一个对象...item，它有助于保留item对象中存在的所有元素，并且只更新complete键。

Answer 3

todos是一个数组，每个数组都有一个map函数，该函数在数组上迭代，用于修改数组中的项。所以item表示当前数组的item。你可以给它取任何名字

在此函数中，您使用setTodos来设置todos的状态。这里我们检查如果item.id等于todo.id，那么设置todos的状态。

在设置状态时，我们通过使用return {...item, completed: !item.completed}来保持todos的初始状态

item前三个点称为解构

Destructuring作业

映射函数