设置没有删除项目的状态答案

【问题标题】：Setting state without a removed item设置没有删除项目的状态
【发布时间】：2018-07-05 21:32:50
【问题描述】：

我在这里有一个使用 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) }); 时，它会将状态设置为一个空数组（因为我试图将状态设置为我刚刚删除的项目......）重新渲染该页面并没有显示任何内容。我希望它重新渲染页面并且仍然有剩余的待办事项。

【问题讨论】：

标签： javascript reactjs firebase

【解决方案1】：

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

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

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

    return { todos };
  });
});

【讨论】：

啊！你打败了我；）
这太完美了！ filter() 曾经在我脑海中闪过，但我不太确定我是否可以让它发挥作用。谢谢！

【解决方案2】：

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
  });
});

【讨论】：