如何使用对象属性从数组中删除对象-React

Question

我有一个待办事项列表，其中包含一个孙子项中的删除按钮，当单击该子项时会在父项中触发一个事件-我希望此事件删除与单击的孙子项对应的数组项。

父级（包含数组和我对函数的尝试）

const tasks = [
  { name: 'task1', isComplete: false },
  { name: 'task2', isComplete: true },
  { name: 'task3', isComplete: false },
]

// taskToDelete is the name of the task - doesn't contain an object
deleteTask(taskToDelete) {
    this.state.tasks.remove(task => task.name === taskToDelete);
    this.setState({ tasks: this.state.tasks });

}

任何帮助，将不胜感激

Answer 1

那里有两个问题：

1. 您似乎要尝试直接进行修改this.state.tasks。重要的是不要这样做，永远不要直接修改this.state或在其上任何对象。有关状态，请参见React文档中的“不直接修改状态”。

2. 您要传递的对象setState是从当前状态派生的。同样重要的是永远不要这样做。:-)而是传递setState一个函数，并在调用该函数时使用它传递给您的状态对象。从“状态更新可以是异步的”中的文档：

   因为this.props和this.state可能被异步更新，所以您不应该依赖于它们的值来计算下一个状态 ... [相反] ...使用第二种形式的形式setState()接受函数而不是对象。

   （我的重点）

我认为您remove在数组上的目的是假设的，但为避免疑问，数组没有remove方法。在这种情况下，最好的方法是filter删除所有不应该存在的条目，因为我们需要一个新的数组。

所以：

deleteTask(taskToDelete) {
    this.setState(prevState => {
        const tasks = prevState.tasks.filter(task => task.name !== taskToDelete);
        return { tasks };
    });
}

Answer 2

您可以简单地过滤数组：

this.setState(prevState => ({
    tasks: prevState.tasks.filter(task => task.name !== 'taskToDelete')
}));

同样在基于 更新时this.state，最好使用函数形式，因为它setState是async。