在React应用和Firebase数据库之间同步状态

时间:2016-09-13 10:28:50

标签: javascript reactjs firebase firebase-realtime-database

我是React的新手,我正在关注一个在线教程。我已经开发了以下代码作为Todo App的一部分。它是从状态中删除现有待办事项(对象)的逻辑。州的格式如下:

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方法时确实删除了选定的待办事项。

当教师通过npm re-base library将应用与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
  });
},

我不认为他遵循最佳做法,因为我们不应该根据React docs改变状态。我宁愿避免这种情况。所以我的问题是:

  1. 为什么removeTodo的版本和我的版本不合作?
  2. 我该怎么做才能让它发挥作用?

1 个答案:

答案 0 :(得分:1)

通过以下方式重构我的removeTodo方法,我设法避免改变状态并在React应用和Firebase数据库之间成功同步状态:

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