javascript - Firebase数据重复问题

Question

我正在开发一个带有后端 firebase 的 React TODO 应用程序。我遇到的问题是，在从 Firebase RTD 更新或删除节点后，从 Firebase RTD 发送的数据会追加两次。

状态:

// Initialize state
this.state = {
    todos: []
}

这是我的getTodos函数，它负责读取数据，在componentDidMount内部调用:

getTodos () {
    firebase.database().ref('todos').on('value', (todo) => {
        const todos = todo.val();
        // Iterate through keys
        Object.keys(todos).map(todoItem => {                
            let todo = todos[todoItem];
            // Update the todos array
            this.setState({
                todos: [...this.state.todos, todo]
            })
        })
    })
}

渲染部分:

<tbody>
{
  this.state.todos.map((todo, index) => {
     return (
        <tr key={index}>
           <td>{index + 1}</td>
           <td>{todo.title}</td>
           <td>{todo.date}</td>
           <td align="center">
           <button className="btn btn-success btn-sm" data-toggle="modal" data-target="#editModal" onClick={this.assignID.bind(this)}>
                   <i className="fa fa-pencil"></i>
               </button> &nbsp;
               <button className="btn btn-danger btn-sm" onClick={this.removeTodo.bind(this)}>
                   <i className="fa fa-trash"></i>
               </button>
                </td>
         </tr>
          )
        })
      }
    </tbody>
}

结果(删除 TODO 之前):

删除 TODO 后:

我尝试将 todos 状态长度重置为零，然后调用 getTodos，但这并没有解决问题。有什么想法吗？

Answer 1

您没有清除该状态中 todos 的现有内容。另外:您在循环的每次迭代中都更新状态，这是低效的。

firebase.database().ref('todos').on('value', (snapshot) => {
    var todos = [];
    snapshot.forEach((todo) => {
        todos.push(todo.val());
    });
    this.setState({
        todos: todos
    })
})