时间戳

首页 > 解决方案 > 为什么我不能将服务器的答案设置为状态？

javascript - 为什么我不能将服务器的答案设置为状态？

问题描述

我正在尝试从 api.openweathermap.org 获取 JSON 并将其设置为 state，但结果我得到了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;

标签： javascriptreactjsfetch-api

解决方案

React 状态更新是异步的，并且发生在函数调用结束时（即所有设置状态调用都被“整理”并一起处理，这是协调的一部分），因此控制台在之后立即记录状态更新是行不通的。

尝试使用setState回调

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

State 将在之后同步更新并调用回调，因此您将看到新的 state 值。你也不需要等待它。

推荐阅读