Как справиться с размонтированием компонента с заданным интервалом, чтобы избежать утечки памяти - PullRequest
Новая
       15

Как справиться с размонтированием компонента с заданным интервалом, чтобы избежать утечки памяти

0 голосов
/ 10 сентября 2018

У меня есть компонент React, который запускается с таймера обратного отсчета, когда компонент отключается либо при нажатии кнопки, либо при обратном отсчете до нуля. Это реализовано так: 

state = {
  counter: 60,
};

componentWillMount() {
  this.doCountDown();
}

doCountDown() {
  if (this.state.counter < 1) {
    return this.props.tryAgain();
  }
  this.setState(prevState => ({ counter: prevState.counter - 1 }));
  setTimeout(() => this.doCountDown(), 1000);
}

Это не дубликат Размонтирование компонента с помощью SetInterval в React .

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

У кого-нибудь есть идеи, что делать?

Для более подробного объяснения: this.props.tryAgain() изменит состояние вверх, что приведет к размонтированию этого компонента. Когда это происходит из-за тайм-аута, состояние все еще пытается измениться, пока компонент уже отключен. Это указывает на утечку памяти и является плохой практикой. Поэтому я пытаюсь найти хорошую работу, чтобы этого не случилось.

1 Ответ

0 голосов
/ 10 сентября 2018

Вам нужно вызвать метод clearInterval при размонтировании: 

componentWillUnmount() {
    clearInterval(this.timeout)
}


doCountDown() {
    if (this.state.counter < 1) {
        return this.props.tryAgain();
    }
    this.setState(prevState => ({ counter: prevState.counter - 1 }));
    this.timeout = setTimeout(() => this.doCountDown(), 1000);
}
...