javascript - 在 React.js 的 setInterval 中发出访问状态的问题

Question

我试图以这种方式访问​​ setInterval 中组件的状态，但它不起作用:

componentDidMount: function() {
    setInterval(function() {
      console.log(this.state);
    }, 3000);
}

但是，如果我将回调函数放在一个单独的组件方法中，它会完美地工作:

displayState: function() {
  console.log(this.state)
}
componentDidMount: function() {
    setInterval(this.displayState(), 3000);
}

知道为什么会这样吗？我更愿意使用第一个选项。

Answer 1

在您的第一个示例中，当回调函数触发时，this 超出范围。解决此问题的一种方法是使用变量:

componentDidMount: function() {
    var self = this;
    setInterval(function() {
      console.log(self.state);
    }, 3000);
}

您第二次尝试的问题是您立即调用该函数并将执行该函数的结果传递给setInterval。您应该传递函数本身，注意绑定(bind) this 的值:

componentDidMount: function() {
    setInterval(this.displayState.bind(this), 3000);
}

澄清一下，此方法与问题中的第二个示例之间的区别在于，此处将 function 传递给 setInterval(因为 function. bind() 返回一个函数)。

当您使用 React.createClass 时，没有必要自己管理 this 的绑定(bind)，因为 autobind .这意味着您可以只传递函数本身，this 将与原始上下文中的相同:

componentDidMount: function() {
    setInterval(this.displayState, 3000);
}

当然，最合适的方法取决于您是否喜欢使用匿名函数。