How to setState the data from two API by Promise? (React.js)

Question

Consider code below:

        componentDidMount(){
            const loginEmail = localStorage.getItem('loginEmail');
            const id = localStorage.getItem('id');

            Promise.all([
                fetch(`http://localhost:9000/api/users/view/${loginEmail}`)   // first API
                .then(value => 
                    value.json().then((res)=>{
                        this.setState({data: res.data});
                    })),
                fetch(`http://localhost:9000/api/event/view/${id}`)   // Second API
                .then(value => 
                    value.json().then((res)=>{
                        this.setState({data: res.data});
                    })),
                ])
                console.log(this.state.data)    // cant get the result
                .catch((err) => {
                    console.log(err);
                });
            }

This is what I am getting the response from console

So is it the way I do is wrong? By the way, My data from JSON api is in Object value.

`setState` is asynchronous—that's why `this.state.data` is not what you're expecting. Check this question out: [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) — coreyward, Feb 28 '20 at 14:24

score 0 · Answer 1 · answered Feb 28 '20 at 15:14

componentDidMount() {
 Promise.all([
   fetch(`http://localhost:9000/api/users/view/${loginEmail}`).then(blob => blob.json()),
   fetch(`http://localhost:9000/api/event/view/${id}`).then(blob => blob.json())
 ])
 .then([response1, response2] => {
   this.setState(prevState => {
    // do your operations
    return {
     ...prevState
    }
   })
 })
 .catch(error => {
  // handle error
 })
}

How to setState the data from two API by Promise? (React.js)

1 Answers1