React.js具有基于其他状态的状态

Question

我遇到了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未立即更新,因此以下调用基于先前值的checkAlarm集合因此是不正确的.alarmSetthis.state.alarmTime

我通过将调用转移checkAlarm到setStatein 的回调来解决这个问题setAlarmTime,但是必须跟踪哪个状态实际上是"正确的"并尝试将所有内容都放入回调中似乎很荒谬:

setAlarmTime: function(time) {
  this.setState({ alarmTime: time }, this.checkAlarm);
}

有没有更好的方法来解决这个问题？在我的代码中有一些其他地方我引用我刚设置的状态,现在我不确定何时能够真正信任状态!

谢谢

Answer 1

是的,setState是异步的,因此this.state不会立即更新.以下是批处理的单元测试,可以解释一些细节.

在上面的示例中,alarmSet是从alarmTime和和elapsedTime状态计算的数据.一般而言,计算数据不应存储在对象的状态中,而应根据需要计算,作为渲染方法的一部分.有一节什么不该进入州？在交互性和动态用户界面文档的底部,它提供了这样的事情的例子,它们不应该进入状态,以及什么组件应该有状态？部分解释了为什么这可能是一个好主意的一些原因.