Как отменить функцию при нажатии на другую кнопку?

Question

[Daniil]

Вот мой код при нажатии на кнопку 'Получить код повторно' он запускает таймер , есть другая кнопка 'Назад' при её нажатии должна функция onClick() и countDown() перестать выполняться.

import './App.css';
import React, {useState , Component} from "react";
class Example extends React.Component {

  constructor() {
    super();
    this.state = { 
      seconds: 10 ,  
      isTimerActive: false
    };
    this.timer = 0;
    this.startTimer = this.startTimer.bind(this);
    this.countDown = this.countDown.bind(this);
    this.onClick = this.onClick.bind(this);
  }

  onClick(){
     this.state.seconds = 10;
     this.timer = 0
    this.setTimerActive(true);
    setTimeout(this.setTimerActive, 10000, false); 
    this.startTimer()
  }

  setTimerActive = isTimerActive => {
    this.setState(() => ({ isTimerActive }));
  }

  startTimer() {
    if (this.timer == 0 && this.state.seconds > 0) {
      this.timer = setInterval(this.countDown, 1000);
    }
  }

  countDown() {
    let seconds = this.state.seconds - 1;
    this.setState({
      seconds: seconds,
    });
    
    if (seconds == 0) { 
      clearInterval(this.timer);
    }
  }

  render() {
    return(
      <div >
          { this.state.isTimerActive ? 
          <span pointer-events= 'none'>Смс отправлено , повторная отправка возможно через {this.state.seconds}</span>
          : 
          <span onClick={this.onClick.bind(this)}>Получить код повторно</span> }
          <div>
            <a>Назад</a>
          </div>
      </div>
    );
  }
}
export default Example;

Answer 1

[Назарий Лазарчук]

Смотри, тут такой нюанс, что твои функции onClick () и startTimer () вызывают побочные эффекты, а именно взаимодействуют с объектом window.
Поэтому, все таймеры, которые ты вызываешь, необходимо хранить в переменные. Также, перед уничтожением компонента (componentWillUnmount), необходимо очищать их через clearTimeout / clearInterval.
А кнопка "назад" должна делать переход в другой компонент или очищать таймеры хотя бы