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

结果（在删除待办事项之前）：

删除待办事项后：

我尝试将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
    })
})

Firebase数据重复问题

1 个答案: