Как заставить функцию setInterval срабатывать один раз, когда componentDidUpdate запускается 2 раза

Question

Я работаю над приложением React и хочу управлять бездействием пользователя.

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

Отображаемые компоненты отображаются / окружены компонентом Layout.

Моя проблема в том, что макет обновляется дважды после каждого действия пользователя, поскольку в нем используется функция .setState. Следовательно, компонент InactivityManager также обновляется дважды, и setInterval выполняется дважды одновременно.

Я написал простой компонент InactivityManager, который ничего не рендерит, а визуализирует в макете.

Вот компонент:

import { Component } from 'react';
import { isLogged, logout } from '...';


class InactivityManager extends Component {


  constructor(props) {
    super(props);
    this.refreshRemainingTime = this.refreshRemainingTime.bind(this);
  }

  componentDidUpdate() {
    if (isLogged()) {
      clearInterval(this.refreshRemainingTime);
      localStorage.setItem('activityCountdown', '900');
      window.setInterval(this.refreshRemainingTime, 5000);
    }
  }

  refreshRemainingTime = () => {
    let activityCountdown = parseInt(localStorage.getItem('activityCountdown'), 10);
    activityCountdown -= 60;
    localStorage.setItem('activityCountdown', activityCountdown);
    if (activityCountdown <= 0) {
      logout();
      localStorage.removeItem('activityCountdown');      
    }
  };

  render() {

    return null;
  }
}

export default InactivityManager;

Есть идеи, как лучше всего подходить? Также пытался включить Компонент в App.js, но Компонент ожидает только один дочерний элемент «Маршрут».

Спасибо!

Answer 1

Наконец, я предпочел использовать setTimeout вместо setInterval, с этим больше нет проблем.

Спасибо!

Answer 2

Можете ли вы немного изменить метод componentDidUpdate.

componentDidUpdate() {
    if (isLogged()) {
      if (this.interval) clearInterval(this.interval);
      localStorage.setItem('activityCountdown', '900');
      this.interval = setInterval(this.refreshRemainingTime, 5000);
    }
  }