Question

我是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改变状态。我宁愿避免这种情况。所以我的问题是：

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

Answer 1

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

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

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

1 个答案: