clearInteval не работает в таймере с ReactJS - PullRequest
Новая
       13

clearInteval не работает в таймере с ReactJS

0 голосов
/ 23 января 2020

Я установил простой таймер, счетчик уменьшается 1 раз в 1 сек. c и, в конце концов, прекратит уменьшаться, когда счетчик достигнет нуля, в настоящее время таймер работает нормально, но будет продолжать снижаться после достижения нуля. может кто-нибудь сказать мне, в чем проблема?

также я не уверен, если я использую componentWillUnmount() право жизненного цикла.

код ниже: 

import React, { Component } from "react";

class Timer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 10
    };
  }
  render() {
    const { count } = this.state;
    return <h1>Count:{count} </h1>;
  }
  componentDidMount() {
    this.myTimer = setInterval(() => {
      this.setState({
        count: this.state.count - 1
      });
    }, 1000);
  }
  componentWillUnmount() {
    if (this.state.count === 0) {
      clearInterval(this.myTimer);
    }
  }
}

export default Timer;

1 Ответ

0 голосов
/ 23 января 2020

Сначала вы используете функцию setState с prevState, потому что вы вычисляете следующее состояние из текущего, поэтому вы должны изменить эту часть.

И вы должны самостоятельно остановить таймер, потому что компонент отключается при закрытии страницы, поэтому вам следует обновить метод setState следующим образом 

this.myTimer = setInterval(() => {
  if (this.state.count > 0) {
    this.setState(prevState => ({
      count: prevState.count - 1
    }));
  }
}, 1000);

и componentWillUnmount method 

componentWillUnmount() {
  if (this.myTimer) {
    clearInterval(this.myTimer);
  }
}

Надеюсь, это поможет.

...