SetInterval 工作正常，但clearInterval 不起作用
查看我的代码，我有父类 Channel 和子类 Body，当调用 componentDidMount 时，在 body 内，然后我为函数刷新状态设置间隔。在刷新状态函数中，我尝试清除不起作用的间隔
var Header = require('../../common/header.jsx');
var Sidebar = require('../../common/sidebar.jsx');
var Footer = require('../../common/footer.jsx');
var Body = React.createClass({
componentDidMount: function() {
this.intervalId = setInterval(this.refreshStats, 1000);
},
componentWillUnmount: function(){
clearInterval(this.intervalId);
},
refreshStats: function() {
console.log(this.intervalId);
clearInterval(this.intervalId);
},
render: function() {
return (
<Container id='body'>
<Grid>
<Row>
<Col sm={12}>
<PanelContainer>
<Panel>
<PanelBody>
Test
</PanelBody>
</Panel>
</PanelContainer>
</Col>
</Row>
</Grid>
</Container>
);
}
});
var Channel = React.createClass({
mixins: [SidebarMixin, State],
render: function() {
var classes = React.addons.classSet({
'container-open': this.state.open
});
return (
<Container id='container' className={classes}>
<Sidebar />
<Header />
<Body />
<Footer />
</Container>
);
}
});
module.exports = Channel;
另一种方法是直接保存this:
var Body = React.createClass({
componentDidMount: function() {
this.intervalId = setInterval(this.refreshStats, 1000);
},
componentWillUnmount: function(){
clearInterval(this.intervalId);
},
refreshStats: function() {
console.log(this.intervalId);
clearInterval(this.intervalId);
},
render: function() {
...
}
});
这需要更少的代码行，但感觉不太干净。我自己保存在state as the 接受的答案 https://stackoverflow.com/a/31023957/274677建议，但我发布此内容是为了防止更有知识的人可能评论哪种方法更惯用。
另请注意，通过使用反应计时器混合 https://github.com/reactjs/react-timer-mixin您不必担心卸载清理 - 这适用于您是否保存intervalId in state or on this.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
