在 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 不起作用的主要内容,如果未能解决你的问题,请参考以下文章
反应本机 NavigationDrawer navigation.toggleDrawer() 不起作用