使用 .filter 删除 React 中的函数答案

【问题标题】：Remove function in React with .filter使用 .filter 删除 React 中的函数
【发布时间】：2019-01-12 11:42:09
【问题描述】：

在构建 Todo 应用程序时，我想使用删除函数从数组中过滤掉一个对象。到目前为止，我得到了这个。

deleteTask(task) {

    let taskList = this.state.tasks;

    var newTask = taskList.filter(function(_task) { return _task != task})

    this.setState({ 
        tasks: newTask
    });

}

唯一的问题是，该函数在使用该函数时返回整个数组。因此，应该只从我的数组中返回一个对象的 Task 参数在我的 newTask var 中返回整个数组。

我怎样才能绑定或使这个功能工作？

我要从中删除对象的数组不在同一个组件中，不知道这是否重要。但要了解更多信息。

【问题讨论】：

请添加您在任务中得到的内容并使用箭头函数 =>
state.tasks和task参数的结构是什么？
您必须使用任务的一些唯一标识符。像这样：var newTask = taskList.filter(t => t.id != task.id)。您可能还想阅读以下内容：Equality comparisons and sameness

标签： javascript arrays reactjs function

【解决方案1】：

首先，让我们看看为什么_task != task 不能按您的需要工作。试试这个：

const a = { x: 10, y: 'hello' };
const b = { x: 10, y: 'hello' };
console.log(
  a==b,
  a===b,
  Object.is(a,b)
);

令人惊讶，是吗？阅读this了解更多详情。

无论如何，你应该重构你的代码，在你的任务中包含一个id 属性，这样你就可以比较两个任务和它们的 id - 不用担心 JavaScript 中对象比较的奇怪实现！

这应该可以工作：

deleteTask(taskId) {
  this.setState(prevState => ({
    tasks: prevState.tasks.filter(task => task.id !== taskId)
  }));
}

【讨论】：

【解决方案2】：

javascript 中的相等运算符比较对象的引用。因此，即使两个对象具有相同的值，由于它们指向不同的实例，== 将始终返回 false。所以我看到你有两个选择：

重构您的代码以包含一个 id 部分以及用于比较两个任务的部分。
使用 lodash 或 underscore 等库进行深度比较

【讨论】：

也感谢您的提示。一旦我对 JS 有了更多了解，我就会开始使用这些库