Проблема дублирования данных в Firebase

Question

Я работаю над приложением React TODO с бэкэнд-firebase.Проблема, в которой я застрял, заключается в том, что данные, отправленные из RTD-системы Firebase, добавляются дважды при обновлении или удалении узла из RTD-системы Firebase.

Состояние:

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