Question

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

Answer 1

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

您可以改为indexOf，将filter与key相同的物品删除。

snapshot.key

Answer 2

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

return errors.New(fmt.Printf("User %v already exists", dbcfg.Username))

应该是

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

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

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

设置状态，没有删除的项目

2 个答案: