Задать вопрос
@wug1
Новичок

Как правильно делать асинхронные запросы при отрисовке компонента?

Доброго времени суток! Пишу простое react-приложение для просмотра погоды( использую api openweathermap). Как правильно делать запросы при отрисовке компонента? Использую useEffect, все работает, но выползают уведомления
604746444fbf0510128023.png
Репозиторий: https://github.com/AndShir93/weather.git.
  • Вопрос задан
  • 155 просмотров
Подписаться 2 Простой 3 комментария
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Мидл фронтенд-разработчик
    5 месяцев
    Далее
  • Яндекс Практикум
    React-разработчик
    3 месяца
    Далее
  • Яндекс Практикум
    Фронтенд-разработчик
    10 месяцев
    Далее
Решения вопроса 1
olibro
@olibro
Фронтенд разработчик
Каждый хук (то есть функция) требует вторым аргументом зависимости, поскольку ей важно понимать, какое значение будет содержаться в момент её исполнения. Если зависимость обновилась, то исполнится и функция.
Как правило, такие ошибки подсвечивает и ESLint, например.

Но может возникнуть ситуация, когда переменная, указанная в зависимостях, вызовет бесконечный луп, поскольку что-то её меняет извне. В вашем случае, переменная getCity обновляет поле coords в глобальном стейте, это и вызывает ре-рендер. Имеет смысл подумать над порядком вызова данных запросов, например, вызывать только одну функцию (которая будет выполнять два запроса асинхронно), т.е. скрыть эту логику под капотом самого запроса. Например, сначала получаем город (хоть он у нас и дефолтный, Ижевск), затем, если запрос получения города обновил нам координаты и они вообще существуют, выполняем запрос для погоды.

Чтобы доработать текущую реализацию, можно выполнить вопрос в отдельных хуках, чтобы не зависеть, и разделить логику: город без координат существовать не может и т.п. В то же время, это не вызовет бесконечные циклы.

useEffect(() => {
        dispatch(getCity(city)) 
    }, [city, dispatch])

    useEffect(() => {
        // если координаты появились/обновились, получаем погоду
        if (coords) {
            dispatch(getWeather(coords))
        }
    },  [dispatch, coords])


Пробуйте, в сети много материала на эту тему.
https://medium.com/@andrewmyint/infinite-loop-insi...
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
ITK academy Нижний Новгород
от 80 000 до 120 000 ₽
ITK academy Воронеж
от 50 000 до 90 000 ₽