时间戳

首页 > 解决方案 > 设置没有删除项目的状态

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) });时，它会将状态设置为一个空数组（因为我试图将状态设置为我刚刚删除的项目...），它会重新呈现页面并且什么都不显示。我希望它重新渲染页面并且仍然有剩余的待办事项。

标签： javascriptreactjsfirebase

解决方案

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

您可以改为filter使用与 相同的key项目snapshot.key。

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

    return { todos };
  });
});

推荐阅读