0

Всем привет.

Есть веб-приложение - простой виджет, который подгружает локальное время с WorldTime API из разных регионов. Задача - сделать так, чтобы каждые пять секунд время фетчилось с сервера.

Для этого я внутри useEffect использовал setInterval, в который положил функцию, где происходит fetch. Однако есть проблема - при выборе/смене региона приходится ждать по пять секунд, пока отработает setInterval.

setInterval, как я понимаю, запускается заново внутри useEffect при изменении deps, когда происходит выбор нового региона. Я сначала думал, что у меня инет тормозной, и сервер отвечает с такой вот задержкой :)

Как можно решить эту проблему? Нужно, чтобы setInterval не запускался, однако положить useEffect внутрь setInterval по понятным причинам нельзя.

Апп на гитхабе: https://mmoresun.github.io/live-clock/

Сам код: https://codesandbox.io/s/codepen-with-react-forked-66iz3n?file=/src/App.js

1 ответ 1

0

На самом деле все решается довольно просто :) Надо функцию запроса времени добавить в useEffect перед вашим таймером

  useEffect(() => {
    getTime(value); // Принудительно вызываем обновление
    const myInterval = setInterval(() => {
      // refreshing with setInterval every 5 seconds
      
      getTime(value);
    }, 5000);

    return () => clearInterval(myInterval);
  }, [value]); // condition to rerender

И еще обратите внимание на то, что у вас нет дефолтного значения(в приведенном коде во всяком случае) и это вызывает ошибку в fetch

Вот так можно защитить вызов, если value пустое

  useEffect(() => {
    let myInterval;
    if (value) {
        getTime(value); // Принудительно вызываем обновление
        myInterval = setInterval(() => {
          // refreshing with setInterval every 5 seconds
          
          getTime(value);
        }, 5000);
    }
    return () => clearInterval(myInterval);
  }, [value]); // condition to rerender
3
  • Точно! Нужно просто фетчить до сетинтервала, а потом ещё раз уже внутри него. Всё гениальное как обычно просто, спасибо. :) А можно подробнее про дефолтное значение, не могу сообразить, о чём вы.
    – Antonio
    21 окт 2022 в 10:06
  • В функцию getTime передается значение value. Если value пусто, то в fetch запросе получается некорректный URL. Вам надо либо не вызывать getTime при пустом value либо подставлять дефолтное значение, допустим Asia/Yekaterinburg. Хотя я больше склоняюсь к тому, что бы не вызывать.
    – SwaD
    21 окт 2022 в 11:28
  • Вот это я профукал. Спасибо!
    – Antonio
    21 окт 2022 в 12:14

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.