在React.js中调用setInterval内的访问状态

Question

我试图以setInterval这种方式访问a内部组件的状态,但它不起作用:

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.你应该传递函数本身,注意绑定值this:

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

为了澄清,这个方法和你的问题中的第二个例子之间的区别在于,在这里,一个函数被传递给setInterval(因为function.bind()返回一个函数).

当你正在使用React.createClass,没有必要管理的结合this你自己,因为autobind.这意味着您可以只传递函数本身,并且this与原始上下文中的相同:

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

当然,最合适的方法取决于您是否更喜欢使用匿名功能.

Answer 2

您需要使用对的正确引用来执行间隔处理程序this。将React的自动绑定用于最简单的解决方案IMO：

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

或者使用bind，如果你想一个匿名函数：

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