Javascript React应用程序和Firebase数据库之间的同步状态

我是一个新的反应，我正在遵循一个在线教程。作为Todo应用程序的一部分，我开发了以下代码。它是从状态中删除现有todo项（对象）的逻辑。状态采用以下格式：

todos: {todo1: 'Throw the keyboard out of the window',
        todo2: 'Go and buy a new keyboard'}

…以下是我的应用程序的关键代码：

var TodoApp = React.createClass({
  getInitialState: function() {
    return {
      todos: {}
    };
  },
  removeTodo: function(key) {
    var todosCopy = Object.assign({}, this.state.todos);
    delete todosCopy[key];

    this.setState({
      todos: {...todosCopy}
    });
  }  
}  

当调用

removeTodo

方法时，上面的操作将完成，并且所选的todo确实将被删除

当讲师通过将应用程序与Firebase数据库链接，以便如果用户已经使用了应用程序，则将预填充

todos

状态时，会出现问题

他通过将以下方法添加到

TodoApp

：

componentDidMount: function() {
  var base = Rebase.createClass('https://example-com.firebaseio.com/');
  base.syncState('todos', {
    context: this,
    state: 'todos',
  });

添加上述内容后，我的

removeTodo

方法将停止更新状态。但是讲师实际上让他的应用程序使用他自己版本的

removeTodo

方法：

removeTodo : function(key) {
  this.state.todos[key] = null;
  this.setState({
    todos : this.state.todos
  });
},

我不认为他在遵循最佳实践，因为我们不应该根据实际情况改变国家。我宁愿避免这种情况。因此，我的问题是：

为什么他的

removeTodo

版本有效，而我的版本无效

我能做些什么使它工作

---

通过以下方式重构我的

removeTodo

方法，我成功地避免了状态突变，并成功地在React应用程序和Firebase数据库之间同步了状态：

removeTodo: function(key) {  
  this.setState({
    todos: {[key]: null}
  });
}