Проблема обновления состояния, когда оно используется в интервале - PullRequest
Новая
       21

Проблема обновления состояния, когда оно используется в интервале

1 голос
/ 03 апреля 2020

Я создаю приложение React Native и пытаюсь создать таймер. Таймер работает нормально на переднем плане, используя setInterval и обновляя бит состояния, который содержит количество секунд и уменьшает его каждую секунду. Когда приложение находится в фоновом режиме, дата фиксируется и сохраняется. Когда актив снова становится активным, я пытаюсь вычислить разницу между двумя датами, а затем обновляю состояние, чтобы отразить разницу, чтобы пользователю казалось, что таймер работает в фоновом режиме.

Я возникает проблема, при которой состояние не обновляется во время работы таймера. 

const home = () => {

  const WORK_SECONDS = 1500; //1500
  const SHORT_REST_SECONDS = 300; //300
  const LONG_REST_SECONDS = 900; //900
  const ACTIVE_COLOR = '#009688';
  const PAUSED_COLOR = '#00695C';
  const ADD_TIME = 60;
  const NOTIFICATION_TITLE = "Time's up!";
  const NOTIFICATION_BODY = "Finished!";

  const [timer, setTimer] = useState({seconds: WORK_SECONDS, timeCap: WORK_SECONDS });
  const [isActive, setIsActive] = useState(false);
  const [timerColor, setTimerColor] = useState(ACTIVE_COLOR);
  const [sessionCycle, setSessionCycle] = useState([]);
  let time = 0;

  const toggle = () => {
    if (sessionCycle.length == 8) setSessionCycle([]);
    setIsActive(!isActive);
    setTimerColor((timerColor == ACTIVE_COLOR && timer.seconds != timer.timeCap) ? PAUSED_COLOR : ACTIVE_COLOR);
  }

  const reset = () => {
    setTimer({...timer, seconds: timer.timeCap});
    setIsActive(false);
  }

    useEffect(() => {
        AppState.addEventListener('change', handleChange);  
        return () => {
          AppState.removeEventListener('change', handleChange);  
        }
      }, []);

      const handleChange = (newState) => {
        if (newState === "active") {
          let resumeTime = moment(new Date());
          let exitTime = moment(time);
          let duration = moment.duration(resumeTime.diff(exitTime, 'seconds'));
          let diff = duration.asSeconds() * 1000;
          console.log("Attempting to substract - " + diff);
          console.log(timer.seconds + " from appstate");
          setTimer({...timer, seconds: timer.seconds - diff})
          console.log(timer.seconds + " after subtraction");
        }
        else if (newState == "background") {
          time = new Date();
        }
      }

      useEffect(() => {
        let interval = null;
        if (isActive) {
          if (timer.seconds == 0) {
            //sendNotification(); 
            // TODO: Add +1 to pomo total after finishing work session
            updateSessionCycle("forward");  
            clearInterval(interval);
            toggle();
          }
          interval = setInterval(() => {
            console.log(timer.seconds);
            setTimer({...timer, seconds: timer.seconds - 1});
          }, 1000);
        } else if (!isActive && timer.seconds !== 0) {
          clearInterval(interval);
        } 
        return () => clearInterval(interval);
      }, [isActive, timer.seconds]);

      const addTime = () => {
        if (timer.seconds > timer.timeCap - 60) {
          setTimer({...timer, seconds: timer.timeCap})
        } else {
          setTimer({...timer, seconds: timer.seconds + ADD_TIME});
        }
      }

    return (
        <View style={styles.chart}>
            <ProgressCircle
              percent={ (timer.seconds / timer.timeCap) * 100 }
              radius={Math.ceil(Dimensions.get('window').height / 6)}
              borderWidth={Math.ceil(Dimensions.get('window').height / 30)}
              color={timerColor}
              shadowColor="#212121"
              bgColor="#303030"
            >
              <Text style={{ color: '#FFF', fontSize: 50 }}>{moment("2015-01-01").startOf('day').seconds(timer.seconds).format('m:ss')}</Text>
              <Text style={{ color: '#9E9E9E', fontSize: 20 }}>{(timer.timeCap == WORK_SECONDS) ? "Work Session" : "Break"}</Text>
            </ProgressCircle>
        </View>
    );
}

1 Ответ

1 голос
/ 03 апреля 2020

Я подозреваю, что ваша проблема в том, что вы могли использовать устаревшее состояние при вызове setTimer. В вашем useEffect вы создаете функцию setInterval, которая ссылается на timer в закрытии вашей функции. Каждый раз, когда вызывается функция setInterval, вы получаете одну и ту же переменную timer, поэтому вызов: 

setTimer({...timer, seconds: timer.seconds - 1});

... будет непрерывно устанавливать seconds в 1 секунду меньше, чем значение timer.seconds при создании интервала.

К счастью, есть простой обходной путь: 

setTimer(timer => ({...timer, seconds: timer.seconds - 1}));

Это будет вызывать самое последнее состояние timer каждый раз перед выполнением обновления .

...