1

Всем привет. Пишу программу погодную на реакте и столкнулся бедой с хуком useState. а именно то что он асинхронен и дату которую я должен получить в state получается на первый клик сабмита null а на второй уже отрабатывает норм. Я написал некоторые функции и вызываю их в главной функции. Код немного сокращу чтобы не было лишней воды

const useForecast = () => {
    const [forecast, setForecast] = useState(null);
    
    // функция где я меняю state
    const gatherForecastData = async data => {
        const currentDay = await getCurrentDayForecast(data.consolidated_weather[0], data.title);
        const currentDayDetails = await getCurrentDayDetailedForecast(data.consolidated_weather[0]);
         
        await setForecast({ currentDay, currentDayDetails});
        setLoading(false);
    };
 
    // главная функция где вызываются другие функции
    const submitRequest = async location => {
        setLoading(true);
        setError(false);
 
        const response = await getWoeid(location);
        if (!response?.woeid) return;
 
        const data = await getForecastData(response.woeid);
        if (!data) return;
        
        gatherForecastData(data);
        console.log(data);
        // эта дата которая идет с api отрабатывает нормально
        console.log(forecast);
        // эта же дата только которая должна быть в state выдает null
    };

Как тут избавиться от этой ошибки?

3
  • gatherForecastData может возвращать данные не сохраняя в стейте, или объеденить эти 2 функции и сохранять стейт в конце submitRequest. Так же можно отслеживать стейт в useEffect 18 ноя 2021 в 18:24
  • @KonstantinModin я многое что перепробовал, стейт все равно не успевает измениться (или что то вроде того), а useEffect нельзя использовать внутри функций 18 ноя 2021 в 19:04
  • правильное поведение - на момент помещения функции console.log() в стек, значение forecast = null пользуйте useEffect на верхнем уровне (вне функций)
    – Sanya H
    18 ноя 2021 в 19:49

1 ответ 1

0

setState - асинхронная функция

Это значит, что после вызова setForecast значение forecast изменится не сразу и console.log будет возвращать старое значение.

Чтобы дождаться изменения значения forecast нужно использовать useEffect:

useEffect(() => {
  console.log(forecast);
}, [forecast]);
2
  • да, я понимаю это, но как мне к примеру использовать useEffect если gatherForecastData, где стейт меняется, вызывается в submitRequest? я попросту никак не могу связать с useEffect 19 ноя 2021 в 13:05
  • useEffect сам вызовется, когда значение forecast изменится
    – p1uton
    19 ноя 2021 в 13:51

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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