Очистить таймер обратного отсчета, когда экран снова в фокусе

Question

В процессе изучения React Hooks (для перехода от компонентов Class) я создаю простой таймер обратного отсчета в приложении React Native. Я замечаю, что таймеры очищаются неправильно, когда экран сфокусирован.

Это мои два эффекта:

  useEffect(() => {
    const unsubscribe = navigation.addListener("focus", () => {
      // do something
    });
    return unsubscribe;
  }, [navigation]);

  useEffect(() => {
    const timerId = setInterval(() => {
      let timer = timerState;
      if (timer <= 0) {
        clearInterval(timerId);
      } else {
        timer = timer.subtract(1, "s");
        const minutes = timer.minutes();
        const seconds = timer.seconds();
        setTimerMins(minutes);
        setTimerSecs(seconds);
        setTimerState(timer);
      }
    }, 1000);
    return () => {
      return () => window.clearInterval(timerId);
    };
  }, [navigation, minsLeftNextCheckIn]);

Первый useEffect() - захват фокуса экрана. Второй - обновить таймер.

Answer 1

У меня была точно такая же проблема вчера ... Любая ссылка на это timerId теряется после завершения useEffect.

Я решил ее, объявив let timerId вне компонента полностью , Тогда вы можете назначить это и очистить его отовсюду, и у вас будет только один. Просто проверяйте его каждый раз перед тем, как очистить, например, timerId && window.clearInterval(timerId);