尝试删除时，React列表会删除错误的项目

Question

我使用React创建了一个待办事项列表，一切正常，直到我尝试实现删除功能。

每当我尝试删除某个项目时，React会删除除该项目以外的所有其他内容。我检查了我的代码，我无法弄清楚可能是什么原因。单击项目时，控制台日志将返回正确的对象。我觉得这可能与键值不唯一或我的代码是如何分解有关。为了更好地说明我遇到的问题，我创建了一个codepen。

Answer 1

splice()实际上做了两件事，实际上它有一个副作用和一个回归。你期望原始数组返回（可以理解）但是splice（）实际上从初始数组（mdn）返回 chopped 项的数组。因此，变量tasks被设置为从待办事项列表项的初始状态中删除的待办事项列表项数组。

你想要的只是副作用。您可以看到更新的CodeSandbox here，但我所做的只是创建当前状态的副本，然后在该副本上使用splice（） - 此时我们只使用splice的副作用方面（）。

const tasks = this.state.tasks.slice(); // copy of current todo list
tasks.splice(index, 1); // "splice" out the list item we want to delete, but don't return a new list

this.setState({ tasks });

Answer 2

这是因为deleteHandler组件中的Todo使用了.splice ... returns the removed element。

您的代码：

  deleteHandler = index => {
    const tasks = this.state.tasks.splice(index, 1);
    this.setState({
      tasks
    });
  };

您想要在this codepen中执行某些操作。

  deleteHandler = index => {
    const newTasks = this.state.tasks.filter((task, tIndex) => {
      return index !== tIndex;
    });
    this.setState({
      tasks: newTasks
    });
  };

Answer 3

目前，您的删除功能正在按预期工作：返回包含您单击的元素的更新的state.tasks。请改用：

deleteHandler = index => {
    this.setState({
      tasks: this.state.tasks.filter((task) => task.value !== index)
    });
  };

它正常工作。

Answer 4

用此替换你的deleteHandler功能。

deleteHandler = index => {
   const tasks = this.state.tasks.slice();
   tasks.splice(index, 1);
   this.setState({
      tasks
   });
};

设置/重置/修改状态时，更好的方法是使用切片方法创建状态副本，然后从复制列表中删除setState。