Question

有人可以向我解释为什么这不过滤toDoList

const handleDelete = e => {
    const { id } = e.currentTarget.parentElement;
    toDoList.filter(element => element._id !== id);
    setToDoList([...toDoList]);
  };

这是：

const handleDelete = e => {
    const { id } = e.currentTarget.parentElement;
    setToDoList(toDoList.filter(element => element._id !== id));
  };

Answer 1

其原因是Array.prototype.filter()在最后返回新的过滤数组。阅读文档：

filter()方法将创建一个新数组，其中包含所有通过提供的功能实现的测试的元素。

在第二个示例中，您将其传递给setToDoList，而在第一个示例中，代码只是在调用它，而不是将其分配给变量。

请考虑以下内容：

const toDoList = [{id: 1, name: 'first'}, {id: 2, name: 'second'}];
const id = 1;

toDoList.filter(element => element.id !== id);
console.log('original toDoList:', toDoList);

const result = toDoList.filter(element => element.id !== id);
console.log('filtered result:', result);

希望对您有帮助！

Answer 2

filter()不会更新参考数组，但会返回一个新数组，因此在第一个方案中，您正在过滤而不是保存过滤后的输出，因此在第二个方案中时，再次设置了相同的值，而在传递返回的过滤后的值设置

带钩子的过滤器说明？

2 个答案: