React- this shows populated state but this.state is empty

Question

I have a component that renders the user's friends, and I need to get information about them. I have the function below called in componentDidMount that gets information about the friends and puts the data in state:

getFriends = ids =>{
    const config = {
        headers: {
            token: localStorage.getItem('token')
        }
    };

    axios.post('http://localhost:8082/api/friend/getAll', {friends: ids}, config)
        .then(res=>this.setState({friends: res.data.friends}))
        .catch(err=>console.log(err));
    console.log(this);
    console.log(this.state)
}

The problem is this shows the correctly populated state:

But this.state shows an "empty" state:

I am confused as to why those 2 are different. It shouldn't be a binding issue because I'm using arrow functions. Any help would be appreciated!

If you can share the whole class it would be easier to help. In first impression it seems like it has to do with the fact that 'setState' is asynchronous and your 'console.log' happends before the request happens. — D10S, Jun 07 '20 at 16:16

score 4 · Accepted Answer · answered Jun 07 '20 at 16:12

State updates are asynchronous and also the console values are resolved when you expand the object

So for instance when you log this and later when you try to expand the printed object, the state is evaluated and it shows you the updated state since by that time the state got updated.

However when you log this.state the updated value is not shown since the object is already printed on your screen

Please read

Value was evaluated just now with console.log on JavaScript object

setState doesn't update the state immediately

You can see the updated value of state if you log it in the callback function of setState

getFriends = ids =>{
    const config = {
        headers: {
            token: localStorage.getItem('token')
        }
    };

    axios.post('http://localhost:8082/api/friend/getAll', {friends: ids}, config)
        .then(res=>this.setState({friends: res.data.friends}, () => {
             console.log(this.state);
         }))
        .catch(err=>console.log(err));
}

Glad to have helped @RoyZ – Shubham Khatri Jun 07 '20 at 16:22 — Shubham Khatri, Jun 07 '20 at 16:22

React- this shows populated state but this.state is empty

1 Answers1