Javascript 设置没有删除项的状态

我这里有一个使用react和firebase的待办事项列表。我可以成功地从firebase中删除一个项目并添加一个。问题是移除项目后，是否要重新渲染。我在玩弄它，我意识到我做错了什么，但不知道如何解决我的问题

这里是我的componentDidMount方法，我将状态设置为与firebase发送的数据相等

componentDidMount() {
  this.todosRef.on('child_added', snapshot => {
    const todo = { key: snapshot.key, value: snapshot.val() }
    this.setState({ todos: this.state.todos.concat( todo ) });
  });

  this.todosRef.on('child_removed', snapshot => {
    const removedTodo = { key: snapshot.key, value: snapshot.val() }
    const index = this.state.todos.indexOf(removedTodo);
    this.setState({ todos: this.state.todos.splice(index, removedTodo) 
    });
  });
}

---

正如您所看到的，每当我删除一个项并调用

this.setState（{todos:this.state.todos.splice（index，removedTodo）}）它将状态设置为空数组（因为我正在尝试将状态设置为我刚刚删除的项…），这将重新呈现页面，但不显示任何内容。我希望它重新呈现页面，并且仍然有剩余的todo。
indexOf
将只查找具有完全相同的对象引用的对象，因此，即使您使用与要删除的todo完全相同的数据创建一个新对象，它也无法工作，很遗憾

您可以使用与
快照.key
相同的
键
筛选出项目

this.todosRef.on('child_removed', snapshot => {
  this.setState(previousState => {
    const todos = previousState.todos.filter(todo => todo.key !== snapshot.key);

    return { todos };
  });
});

Splice返回已删除的图元（如果有）。因为在您的示例中，您正在修改数组，所以新状态将设置为包含已删除元素的数组

this.state.todos.splice(index, removedTodo);

应该是

this.state.todos.splice(index, 1);

这应该在设置状态之前执行

this.todosRef.on('child_removed', snapshot => {
  const removedTodo = {
    key: snapshot.key,
    value: snapshot.val()
  }
  const index = this.state.todos.indexOf(removedTodo);

  let todos = this.state.todos.splice(index, removedTodo);
  todos.splice(index, 1);

  this.setState({
    todos: todos
  });
});

啊！你赢了我；）这太完美了
filter（）
曾在我脑海中闪过，但我不确定是否能让它工作。谢谢