小编典典

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

reactjs

我遇到了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

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

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

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

谢谢


阅读 259

收藏
2020-07-22

共1个答案

小编典典

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

在上面的示例中,alarmSet是根据alarmTimeand
elapsedTime状态计算的数据。一般来说,不应将计算的数据存储在对象的状态中,而是应根据需要将其作为render方法的一部分进行计算。有一节
不应该
介绍什么状态?
__
在“交互性和动态UI”文档的底部,该文档提供了不应该处于这种状态的示例以及“
应该具有哪些组件的
状态”的示例本节说明了为什么这可能是一个好主意的一些原因。

2020-07-22