javascript - 设置没有删除项目的状态

Question

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

这是我的 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) }); 时，它会将状态设置为空数组(因为我试图将状态设置为我刚刚删除的项目...)，它重新呈现页面并且不显示任何内容。我希望它重新渲染页面并仍然保留剩余的待办事项。

Answer 1

indexOf 只会查找具有完全相同对象引用的对象，因此，即使您创建一个与要删除的待办事项具有完全相同数据的新对象，它也不起作用，遗憾的是.

您可以使用与 snapshot.key 相同的 key 来过滤项目。

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

    return { todos };
  });
});