clearInterval в React

Question

clearInterval в React

2

Я новичок в React, и я пытался создать простой секундомер с кнопками запуска и остановки. Я стучу головой о стену, чтобы попытаться очиститьInterval с помощью события onClick на кнопке Stop. Я бы объявил переменную для setInterval, а затем очистил ее с помощью clearInterval. К сожалению, он не работает. Какие-нибудь советы? Заранее спасибо.

import React, { Component } from 'react';

class App extends Component {
  constructor(props){
    super(props);
    this.state = {time:0}

    this.startHandler = this.startHandler.bind(this);
  }

  getSeconds(time){
    return '0${time%60}'.slice(-2);
  }

  getMinutes(time){
    return Math.floor(time/60);
  }

  startHandler() {
      setInterval(()=>{
      this.setState({time:this.state.time + 1});
    },1000)

  }

  stopHandler() {
    //HOW TO CLEAR INTERVAL HERE????
  }

  render () {
    return (
      <div>
        <h1>{this.getMinutes(this.state.time)}:{this.getSeconds(this.state.time)}</h1>
        <button onClick = {this.startHandler}>START</button>
        <button onClick = {this.stopHandler}>STOP</button>
        <button>RESET</button>
      </div>
    );
  }
}

export default App;

Lucas 24 авг. 2017, в 15:55

Источник

0

Возможные дубликаты Действительно ли необходимо очистить таймеры перед размонтированием компонента?
Shubham Khatri 24 авг. 2017, в 13:37

Теги:

reactjs

setinterval

clearinterval

3 ответа

Ещё вопросы

Возможные дубликаты Действительно ли необходимо очистить таймеры перед размонтированием компонента?

Dinesh Patil · Answer 1 · 2017-10-27T09-01-00.000Z

вы можете добавить интервал в состояние вашего компонента и очистить его, когда захотите.

componentDidMount(){
  let intervalId = setInterval(this.yourFunction, 1000)
  this.setState({ intervalId: intervalId })
}

componentWillUnmount(){
  clearInterval(this.state.intervalId)
}

Вы можете увидеть мой ответ на этот URL-адрес stackoverflow.com/a/53995199/2214789

Murat K. · Answer 2 · 2017-08-24T15-07-00.000Z

Вы можете использовать clearInterval(id) чтобы остановить его. Вы должны хранить идентификатор setInterval например

const id = setInterval(() = > {
    this.setState({
        time: this.state.time + 1
    });
}, 1000)
clearInterval(id);

Причина для отрицательного голосования?

Daniel Andrei · Answer 3 · 2017-08-24T13-35-00.000Z

В вашей функции startHandler вы можете:

    this.myInterval = setInterval(()=>{
      this.setState({ time: this.state.time + 1 });
    }, 1000);

и в вашей stopInterval() вы сделаете clearInterval(this.myInterval);