Saya mencoba mendapatkan JSON dari api.openweathermap.org dan menyetelnya ke status, tetapi sebagai hasilnya saya mendapatkan console.log

Apa yang harus saya lakukan untuk mengatur info JSON ke 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;
-1
Stas Motorny 20 Januari 2020, 00:21

2 jawaban

Jawaban Terbaik

Anda tidak dapat await setState. Untuk mengeksekusi kode setelah status Anda berubah, setState sebenarnya memiliki argumen ke-2 yang merupakan fungsi panggilan balik yang dijalankan setelah status berubah. Kode Anda akan terlihat seperti ini:

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

Di sini Anda dapat melihat masalah lain. Karena Anda menggabungkan string ('data:') dengan objek, objek Anda diubah menjadi string dan Anda mendapatkan [objek Obyek]. Untuk menghindarinya, cetak hanya objek atau cetak objek secara terpisah dari string seperti ini: console.log('data:', data). Perhatikan bahwa saya menggunakan koma di sini, bukan nilai tambah.

1
IAmVisco 19 Januari 2020, 21:29

Pembaruan status reaksi tidak sinkron dan terjadi di akhir panggilan fungsi (yaitu semua panggilan status yang ditetapkan "disusun" dan diproses bersama, bagian dari rekonsiliasi), jadi konsol yang mencatat pembaruan status segera setelahnya tidak berfungsi.

Coba gunakan panggilan balik setState

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

Status akan memperbarui dan memanggil panggilan balik setelahnya, secara sinkron, sehingga Anda akan melihat nilai status baru. Anda juga tidak perlu menunggunya.

2
Drew Reese 19 Januari 2020, 21:32