javascript - React.js 的状态基于其他状态

Question

我在使用 React.js 时遇到了一些问题，并且在调用 setState() 时状态没有立即设置。我不确定是否有更好的方法来解决这个问题，或者这是否真的只是 React 的一个缺点。我有两个状态变量，其中一个基于另一个。 (原始问题的 fiddle :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 的调用会设置 alarmSet 基于 this.state.alarmTime 的先前值，因此不正确。

我通过将对 checkAlarm 的调用移至 setAlarmTime 中 setState 的回调中解决了这个问题，但必须跟踪状态是什么实际上“正确”并尝试将所有内容都放入回调中似乎很荒谬:

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

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

谢谢

Answer 1

是的，setState是异步的，因此 this.state 不会立即更新。这是unit tests用于批处理，这可能会解释一些细节。

在上面的示例中，alarmSet 是根据 alarmTime 和 elapsedTime 状态计算的数据。一般来说，计算数据不应该存储在对象的状态中，而是应该作为渲染方法的一部分根据需要进行计算。有一段What Shouldn’t Go in State?在交互性和动态 UI 文档的底部，它给出了类似这样不应该进入状态的示例，以及 What Components Should Have State?部分解释了为什么这可能是个好主意的一些原因。