Why can't I set server's answer to state?

Question

I'm trying to get JSON from api.openweathermap.org and set it to state, but as result I get console.log

What should I do set JSON's info to 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;

Does this answer your question? [Why calling react setState method doesn't mutate the state immediately?](https://stackoverflow.com/questions/30782948/why-calling-react-setstate-method-doesnt-mutate-the-state-immediately) — Drew Reese, Jan 19 '20 at 21:27

Drew Reese · Answer 1 · 2020-01-19T21:32:55.093

2

React state updates are asynchronous and occur at the end of the function call (i.e. all set state calls are "collated" and processed together, part of the reconciliation), so console logging the state update immediately after doesn't work.

Try to use the setState callback

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

State will update and call the callback afterwards, synchronously, so you'll see the new state value. You also do not need to await it.

edited Jan 19 '20 at 21:32

answered Jan 19 '20 at 21:25

Drew Reese

165,259
14
153
181

Thank you for answer. I tried, but got the same result. – Stas Motorny Jan 19 '20 at 21:28
1

You are using concatenation of string and object as well which will result into `[object Object]` instead of actual data. – IAmVisco Jan 19 '20 at 21:30
@IAmVisco astute observation, I had simply copy/pasted the console log, but you are quite right. Updated. – Drew Reese Jan 19 '20 at 21:35
Thank you for help. It works now. Your answer really helped me. – Stas Motorny Jan 19 '20 at 22:05

score 1 · Accepted Answer · answered Jan 19 '20 at 21:29

You cannot await setState. To execute code after your state has changed, setState actually has 2nd argument which is a callback function that is executed after the state has changed. Your code should look something like this:

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

Here you can see another problem. Since you are concatenating a string ('data:') with an object, your object is converted to the string and you get [object Object]. To avoid this, print either only the object or print an object separately from the string like this: console.log('data:', data). Note that I used a comma here, not a plus.

Thank you. You are right and now everything works fine) – Stas Motorny Jan 19 '20 at 22:03 — Stas Motorny, Jan 19 '20 at 22:03

Why can't I set server's answer to state?

2 Answers2