Невозможно отобразить данные из openweatherAPI

Question

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

Моя проблема в том, что независимо от того, как я пытаюсь получить некоторые данные из этого объекта, мне кажется, что это не удается.

console.log(data) дает мне объект, но каждый раз, когда я пытаюсь, например, data.main.temp или data.city, выдает ошибку.

Есть предложения?

  state = {
        temperature: null,
        city: undefined,
        country: undefined,
        humidity: undefined,
        description: undefined,
        error: undefined
    }
    getWeather = async (e) => {
        e.preventDefault();
        const city = e.target.elements.city.value;
        const country = e.target.elements.country.value;
        const api_call = await fetch(`http://api.openweathermap.org/data/2.5/weather?q=${city},${country}&appid=${API_KEY}&units=metric`);
        const data = api_call.json();

        console.log(data);        

        //To check after data
        if(city && country){
            this.setState({
                //temperature: data.main.temp,
                //city: data.name,
                //country: data.sys.country,
                //humidity: data.sys.humidity,
                //description: data.weather[0].description,
                error: ""
            });        
        } else {
            this.setState({
                temperature: undefined,
                city: undefined,
                country: undefined,
                humidity: undefined,
                description: undefined,
                error: "Please enter values"
            });

How the object looks while fetched.

Promise {<pending>}
__proto__: Promise
[[PromiseStatus]]: "resolved"
[[PromiseValue]]: Object
base: "stations"
clouds: {all: 40}
cod: 200
coord: {lon: -2.24, lat: 53.48}
dt: 1569681998
id: 2643123
main: {temp: 15.43, pressure: 1005, humidity: 87, temp_min: 12.78, temp_max: 17.78}
name: "Manchester"

Answer 1

Я полагаю, api_call.json() возвращает обещание, и поэтому у вас возникают проблемы.

Я предлагаю вам попытаться await в этом утверждении также:

const data = await api_call.json();

Подробнее о fetch API вы можете найти здесь: https://developers.google.com/web/updates/2015/03/introduction-to-fetch

Приветствия!

Answer 2

Вы пытались использовать try/catch как:

getWeather = async (e) => {
    e.preventDefault();
    let response = null;
    const city = e.target.elements.city.value;
    const country = e.target.elements.country.value;
    try {
        response = await fetch(`http://api.openweathermap.org/data/2.5/weather?q=${city},${country}&appid=${API_KEY}&units=metric`);
        const data = response.json()
        data && this.setState({
                temperature: data.main && data.main.temp,
                city: data.name,
                country: data.sys && data.sys.country,
                humidity: data.sys && data.sys.humidity,
                description: data.weather[0].description,
                error: ""
            }); 
    } catch (error) {
         this.setState({
                temperature: undefined,
                city: undefined,
                country: undefined,
                humidity: undefined,
                description: undefined,
                error: "Please enter values"
         });
    }
}