Проблема с использованием React Hooks при вызове ax ios

Question

Я делаю базовое приложение c погоды с React, и у меня возникла проблема с обновлением setWeather weather. Я читал, что setState не обновляет состояние при первом вызове, и это похоже на пустой объект, возвращаемый console.log(weather). cityData возвращает полный ответ, как и ожидалось, но weather.name и невложенные данные (т.е. только строки, а не массивы или объекты) работают правильно, что является неожиданным.

Я хотел бы знать, как заставить setWeather работать так, как рекламируется, и почему массивы и объекты, возвращаемые API, отображаются как неопределенные.

import React, { useState } from 'react';
import axios from 'axios';


const Search = () => {
    const [query, setQuery] = useState('');
    const [weather, setWeather] = useState({});

    const findCity = (e) => {
        e.preventDefault()
        axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${query}&units=imperial&appid=${APIKEY}`)
        .then(res => {
            const cityData = res.data;
            console.log(cityData);
            setWeather(res.data);
            setQuery('');
            console.log(weather)
        }).catch(err => console.log(err))
    }

    return(
        <React.Fragment>
            <h1>App</h1> 
            <p>Get the weather in your city!</p>

                <form onSubmit={findCity}>
                        <input 
                            type='text' 
                            className='city-search'
                            placeholder='What city are you looking for?'
                            name='city-name'
                            onChange={e => setQuery(e.target.value)}
                            value={query}
                        /> 

                    <button
                        type='submit'>
                        Get City
                    </button>
                </form>
            <h1>{weather.name}</h1>
        </React.Fragment>
    )

}

Answer 1

https://api.openweathermap.org/data/2.5/weather?q= $ {query} & units = imperial & appid = $ {APIKEY}

Вы передаете здесь запрос и APIKEY. Если нет, пожалуйста, добавьте их также к вашему вызову ax ios. Я предполагаю, что вы получаете неверный ответ. APIKEY должен быть предоставлен для получения успешного ответа от Weather API.

Answer 2

Вы не сможете выполнить console.log(weather) в обработчике отправки, потому что обработчик отправки все еще использует старую погоду (то есть из текущего рендеринга). Вместо этого сделайте это:

const Search = () => {
    const [query, setQuery] = useState('');
    const [weather, setWeather] = useState({});

    const findCity = (e) => {
        e.preventDefault()
        axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${query}&units=imperial&appid=${APIKEY}`)
        .then(res => {
            const cityData = res.data;
            console.log(cityData);
            setWeather(res.data);
            setQuery('');
        }).catch(err => console.log(err))
    }
    console.log(weather) //<-- THIS IS THE ONLY THING I'VE CHANGED

    return(
        <React.Fragment>
            <h1>App</h1> 
            <p>Get the weather in your city!</p>

                <form onSubmit={findCity}>
                        <input 
                            type='text' 
                            className='city-search'
                            placeholder='What city are you looking for?'
                            name='city-name'
                            onChange={e => setQuery(e.target.value)}
                            value={query}
                        /> 

                    <button
                        type='submit'>
                        Get City
                    </button>
                </form>
            <h1>{weather.name}</h1>
        </React.Fragment>
    )

}