我是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
的版本和我的版本不合作?答案 0 :(得分:1)
通过以下方式重构我的removeTodo
方法,我设法避免改变状态并在React应用和Firebase数据库之间成功同步状态:
removeTodo: function(key) {
this.setState({
todos: {[key]: null}
});
}