javascript 在 React.js 中的 setInterval 中访问状态问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26348557/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Issue accessing state inside setInterval in React.js
提问by danst_18
I am trying to access the state of a component inside a setIntervalin this way but it's not working:
我试图以setInterval这种方式访问 a 内部组件的状态，但它不起作用：
componentDidMount: function() {
setInterval(function() {
console.log(this.state);
}, 3000);
}
However, if I place the callback function in a separate component method, it works perfectly:
但是，如果我将回调函数放在单独的组件方法中，它就可以完美运行：
displayState: function() {
console.log(this.state)
}
componentDidMount: function() {
setInterval(this.displayState(), 3000);
}
Any idea why is this happening? I would prefer to use the first option.
知道为什么会这样吗？我更愿意使用第一个选项。
回答by Tom Fenech
In your first example, thisis out of scope when the callback function fires. One way to solve this problem would be to use a variable:
在您的第一个示例中，this当回调函数触发时超出范围。解决此问题的一种方法是使用变量：
componentDidMount: function() {
var self = this;
setInterval(function() {
console.log(self.state);
}, 3000);
}
The problem with your second attempt is that you are calling the function immediately and passing the resultof executing the function to setInterval. You should pass the function itself, taking care to bind the value of this:
您第二次尝试的问题在于您正在立即调用该函数并将执行该函数的结果传递给setInterval. 您应该传递函数本身，注意绑定 的值this：
componentDidMount: function() {
setInterval(this.displayState.bind(this), 3000);
}
To clarify, the difference between this approach and the second example in your question is that here, a functionis being passed to setInterval(because function.bind()returns a function).
为了澄清，这种方法和第二个例子中你的问题之间的区别是，在这里，一个函数被传递到setInterval（因为function.bind()回报功能）。
As you are using React.createClass, it is not necessary to manage the binding of thisyourself, due to autobind. This means that you can just pass the function itself and thiswill be the same as in the original context:
当您使用 时，由于autobind，React.createClass没有必要管理您this自己的绑定。这意味着您可以只传递函数本身，并且与原始上下文中的相同：this
componentDidMount: function() {
setInterval(this.displayState, 3000);
}
Of course, the most suitable approach depends on whether you prefer to use an anonymous function or not.
当然，最合适的方法取决于您是否更喜欢使用匿名函数。
回答by David Hellsing
You need to execute the interval handler with the correct reference to this.
Use React's autobindingfor the cleasest solution IMO:
您需要使用对 的正确引用来执行间隔处理程序this。使用 React 的自动绑定获得最简单的解决方案 IMO：
displayState: function() {
console.log(this.state)
},
componentDidMount: function() {
setInterval(this.displayState, 3000)
}
Or use bindif you want an anonymous function:
或者，bind如果您想要匿名函数，请使用：
componentDidMount: function() {
setInterval(function() {
console.log(this.state)
}.bind(this), 3000)
}
