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

Posted

技术标签:

【中文标题】在 componentDidMount 上反应本机 setState 不起作用【英文标题】:React native setState on compnonentDidMount doesnt work 【发布时间】: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) 不更新状态呢?没有控制台错误,它只是没有设置状态。

【问题讨论】:

【参考方案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)

【讨论】:

以上是关于在 componentDidMount 上反应本机 setState 不起作用的主要内容,如果未能解决你的问题,请参考以下文章

如何在本机反应中解析json数据

反应本机 NavigationDrawer navigation.toggleDrawer() 不起作用

在 componentDidMount 之后反应不渲染组件

反应:当调用“componentDidMount”时,this.reference.current 为空 [重复]

应用在后台运行时,本机深度链接

从消费者 componentDidMount 更新反应上下文会导致无限重新渲染