Почему я не могу установить ответ сервера в состояние? - PullRequest
Новая
       8

Почему я не могу установить ответ сервера в состояние?

0 голосов
/ 20 января 2020

Я пытаюсь получить JSON с api.openweathermap.org и установить его в состояние, но в результате я получаю console.log

Что мне нужно сделать JSON информация для state.weather?

import React, { Component } from 'react';

class GetWeather extends Component {
    constructor(props) {
        super(props);
        this.state = {
            weather: {},
            temp: ''
        }
    };

        weather = async (e) => {
    e.preventDefault();
    try {
        let response = await fetch('http://api.openweathermap.org/data/2.5/weather?q=London,uk&APPID=b40640de9322c8facb1fcb9830e8b1f4');
        let data = await response.json();
        // if I will use response.text() here, than next console.log will show me the object literal that I got from server
        console.log('data: ' + data);
        await this.setState({weather: data});
        console.log('state ' + this)
    } catch (e) {
        console.log(e);
    }
}

    render() {
        return (
            <button onClick={this.weather} />
        )
    }
}

export default GetWeather;

Ответы [ 2 ]

2 голосов
/ 20 января 2020

Обновления состояния реагирования являются асинхронными и происходят в конце вызова функции (т. Е. Все вызовы заданного состояния «сопоставляются» и обрабатываются вместе, что является частью согласования), поэтому консоль, регистрирующая обновление состояния сразу после этого, не работает.

Попробуйте использовать setState обратный вызов 

this.setState({weather: data}, () => console.log('state', this.state));

Состояние обновит и вызовет обратный вызов впоследствии, синхронно, так что вы увидите новое значение состояния. Вам также не нужно его ждать.

1 голос
/ 20 января 2020

Вы не можете await setState. Чтобы выполнить код после изменения вашего состояния, setState фактически имеет второй аргумент, который является функцией обратного вызова, которая выполняется после изменения состояния. Ваш код должен выглядеть примерно так: 

console.log(data);
this.setState({weather: data}, () => {console.log(this.state)});

Здесь вы можете увидеть еще одну проблему. Поскольку вы объединяете строку ('data:') с объектом, ваш объект преобразуется в строку, и вы получаете [объект Object]. Чтобы избежать этого, выведите либо только объект, либо напечатайте объект отдельно от строки, например: console.log('data:', data). Обратите внимание, что здесь я использовал запятую, а не плюс.

...