clearInterval在reactjs中不起作用

Question

clearInterval在reactjs中不起作用

SetInterval工作正常,但clearInterval不起作用

看到我的代码,我在调用componentDidMount时在body中有父类Channel和和Child类Body,然后在函数refreshState中使用setInterval.在refreshState函数中,我尝试clearInterval,它不起作用

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;

Run Code Online (Sandbox Code Playgroud)

Answer 1

Mar*_*tus 19

另一种方法是直接将其保存在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() {
    ...
}
});

Run Code Online (Sandbox Code Playgroud)

这需要更少的代码行,但感觉不那么干净.我自己保存它,state因为接受的答案表明,但我发布这个以防更有知识的人可能评论哪种方法更惯用.

另请注意,通过使用React Timer mixin,您不必担心卸载清理 - 这适用于您是否保存intervalIdin state或on this.

Answer 2

Dav*_*yon 15

为了保持手柄上intervalId,你需要将它保存在state:

var Body = React.createClass({

  getInitialState = function() {
    return {};
  },

  componentDidMount: function() {
    intervalId  = setInterval(this.refreshStats, 1000);
    this.setState({intervalId: intervalId});
  },

  componentWillUnmount: function(){
    clearInterval(this.state.intervalId);
  },

  refreshStats: function() {
    console.log(this.state.intervalId);
    clearInterval(this.state.intervalId);
  },

  render: function() {
    ...
  }
});

Run Code Online (Sandbox Code Playgroud)

否则,它将无法在渲染周期中存活.

Answer 3

maj*_*our 5

有时您需要使用 window.setInterval 在一个时间间隔内运行一个命令。

当您离开组件（以模拟卸载）时，间隔仍然运行。

更糟糕的是，当您导航回 Greeting 组件时，另一个间隔过程开始了！

如何解决此问题您需要在调用 setInterval 时保存间隔 ID

class Example extends Component {
  intervalID = 0;

  componentDidMount() {
    this.intervalID = setInterval(this.hello, 1000);
  }
  ...
}

Run Code Online (Sandbox Code Playgroud)

要取消setInterval，需要调用clearInterval，这需要调用setInterval时返回的间隔ID。

最好的地方是在组件卸载之前 (componentWillUnmount)。

class Example extends Component {
  intervalID = 0;

  componentDidMount() {
    this.intervalID = setInterval(this.hello, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.intervalID);
  }
}

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，8 月前
查看次数：	24349 次
最近记录：	7 年，1 月前