Блог

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

Итак, вот почему я пытаюсь выполнить ту же операцию с рекурсивным setTimeout, но проблема в том, что он, похоже, использует глобальный контекст (не уверен, но данные не обновляются)… Вот что я делаю:

   const [timerProgress, setTimerProgress] = useState(0);

  const advanceTimer = () => {
    setTimeout(() => {
      setTimerProgress(timerProgress   1 / 30); // <-------- timerProgress seems to be not updated (most of the times is 0) when recursion
      if (timerProgress < 1) {
        advanceTimer();
      }
    }, 1000);
  };

  useEffect(() => {
    if (rival) {
      // When a new rival is found, we stop the 'fetching' action
      setIsFetching(false);

      // Only update the timer if there is a rival
      advanceTimer();
    }
  }, [rival]);
  

Есть идеи, как это решить?

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

 useEffect(() => {
  console.log(timerProgress);
}, [timerProgress])