在 componentDidMount 上反应本机 setState 不起作用答案

【问题标题】：React native setState on compnonentDidMount doesnt work在 componentDidMount 上反应本机 setState 不起作用
【发布时间】：2016-08-01 01:31:48
【问题描述】：

我正在使用 flux 并尝试在 React Native 应用程序的顶部组件中的 componentDidMount 上使用 setState。在 constructor 中，this.state = MainStore.getData(); 似乎可以很好地设置状态。但是由于某种原因this.setState(data); 没有在我的componentDidMount 中设置状态。这是我的顶级组件中的代码和我的通量模式中的商店。

组件：

constructor(props) {
  super(props);
  this.state = MainStore.getData();
}

componentDidMount() {
  MainStore.addChangeListener(this._onChange);
  var data = MainStore.getUpdatedData();
  console.log('data from store: ',data)
  this.setState(data);
  console.log('state: ',this.state)
}

商店：

var kidsBankData = {
  test:null
};

var kidsData = assign({}, EventEmitter.prototype, {
  getData: function() {
    return kidsBankData;
  },

  getUpdatedData: function(){
    newObj = {
      test:'test'
    }
    return newObj;
  },

  emitChange: function() {
    this.emit(CHANGE_EVENT);
  },

  addChangeListener: function(callback) {
    this.on(CHANGE_EVENT, callback);
  },

  removeChangeListener: function(callback) {
    this.removeListener(CHANGE_EVENT, callback);
  }
});

我只是想让流程正常工作，所以我正在使用测试对象。在我的组件中，第一个控制台日志是控制台日志var data = MainStore.getUpdatedData(); 是正确的控制台日志test:'test' 但是第二个日志显示状态仍然是test:null，您可以看到它最初是在constructor 中返回的从商店。

那么为什么this.setState(data) 不更新状态呢？没有控制台错误，它只是没有设置状态。

【问题讨论】：

标签： javascript react-native flux

【解决方案1】：

状态仅在 componentDidMount 方法结束时更新，因此您不会立即在 console.log 中看到结果。实际上，react 框架聚合了所有的状态变化，并一次性执行它们。没有立即的中间状态更新例如，如果您要执行以下操作：

componentDidMount: function() {
  // Get obj1 from some store
  this.setState(obj1)
  // Get obj2 from another store
  this.setState(obj2)
}

这相当于：

componentDidMount: function() {
  // Get obj1 from some store
  // Get obj2 from another store
  this.setState(data1: obj1.data, data2: obj2.data)
}

【讨论】：