我遇到了React.js的一些问题,并且在调用setState()时无法立即设置状态。我不确定是否有更好的方法来解决这个问题,或者这真的仅仅是React的缺点。我有两个状态变量,其中一个基于另一个。(原始问题的提法是:http : //jsfiddle.net/kb3gN/4415/您可以在日志中看到单击按钮时未立即设置它)
setAlarmTime: function(time) { this.setState({ alarmTime: time }); this.checkAlarm(); }, checkAlarm: function() { this.setState({ alarmSet: this.state.alarmTime > 0 && this.state.elapsedTime < this.state.alarmTime }); }, ...
调用时setAlarmTime,由于this.state.alarmTime不会立即更新,因此基于和的先前值进行的以下checkAlarmset 调用是不正确的。alarmSet``this.state.alarmTime
setAlarmTime
this.state.alarmTime
checkAlarm
alarmSet``this.state.alarmTime
我通过将调用移到in checkAlarm的回调中解决了这个问题,但是必须跟踪什么状态实际上是“正确的”并尝试将所有内容都放入回调中似乎很荒谬:setState``setAlarmTime
setState``setAlarmTime
setAlarmTime: function(time) { this.setState({ alarmTime: time }, this.checkAlarm); }
有没有更好的方法来解决这个问题?我的代码中还有其他几个地方可以引用我刚刚设置的状态,现在我不确定何时可以真正信任该状态!
谢谢
是的,setState是异步的,因此this.state不会立即更新。这是批处理的单元测试,可能会解释一些细节。
this.state
在上面的示例中,alarmSet是根据alarmTimeand elapsedTime状态计算的数据。一般来说,不应将计算的数据存储在对象的状态中,而是应根据需要将其作为render方法的一部分进行计算。有一节 不应该 介绍什么状态? __在“交互性和动态UI”文档的底部,该文档提供了不应该处于这种状态的示例以及“ 应该具有哪些组件的状态”的示例。本节说明了为什么这可能是一个好主意的一些原因。
alarmSet
alarmTime
elapsedTime