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。您应该传递函数本身，注意绑定this：

的值

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

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

当您使用React.createClass时，由于autobind，无需自行管理this的绑定。这意味着您只需传递函数本身，this将与原始上下文中的相同：

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

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

Answer 2

您需要使用对this的正确引用来执行间隔处理程序。使用React的自动绑定作为cothingst解决方案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)
}

Answer 3

对于函数语法，这应该起到在间隔函数内部访问道具和状态的技巧：

useEffect(() => {
    //run instantly
    functionThatShouldRunEveryTenSeconds(props);

    const interval = setInterval(() => {
        //every 10 seconds
        functionThatShouldRunEveryTenSeconds(props);
    }, 1000);
    return () => clearInterval(interval);
}, []);

您应该能够正常访问状态和道具等所有内容。

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

3 个答案: