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 的以下调用会根据this.state.alarmTime 的先前值设置alarmSet，因此是不正确的。

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

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

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

谢谢

Answer 1

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

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

Answer 2

正如 Douglas 所说，将计算状态保存在 this.state 中通常不是一个好主意，而是每次在组件的 render 函数中重新计算它，因为到那时状态已经更新。

但是这对我不起作用，因为我的组件实际上有自己的更新循环，需要检查并可能在每次滴答时更新其状态。由于我们不能指望this.state 每次更新都会更新，我创建了一个解决方法来包装React.createClass 并添加它自己的内部状态跟踪。 （$.extend 需要 jQuery）（小提琴：http://jsfiddle.net/kb3gN/4448/）

var Utils = new function() {
  this.createClass = function(object) {
    return React.createClass(
      $.extend(
        object,
        {
          _state: object.getInitialState ? object.getInitialState() : {},
          _setState: function(newState) {
            $.extend(this._state, newState);
            this.setState(newState);
          }
        }
      )
    );
  }
}

对于在渲染函数之外需要最新状态的任何组件，只需将对 React.createClass 的调用替换为 Utils.createClass。

您还必须将所有this.setState 调用更改为this._setState，并将this.state 调用更改为this._state。

这样做的最后一个后果是您将丢失组件中自动生成的displayName 属性。这是由于替换了 jsx 转换器

var anotherComponent = React.createClass({

与

var anotherComponent = React.createClass({displayName: 'anotherComponent'.

要解决这个问题，您只需手动将 displayName 属性添加到您的对象。

希望对你有帮助

Answer 3

不确定问问题时是否是这种情况，尽管现在this.setState(stateChangeObject, callback) 的第二个参数采用了一个可选的回调函数，所以可以这样做：

setAlarmTime: function(time) {
  this.setState({ alarmTime: time }, this.checkAlarm);
},
checkAlarm: function() {
  this.setState({
    alarmSet: this.state.alarmTime > 0 && this.state.elapsedTime < this.state.alarmTime
  });
}, ...