How to make setState synchronous in React after axios response

Question

I make HTTP request with axios and inside it I make another HTTP request in order to add some details about items that I get. I need to setState after I push it to the 'orders' Array, but it does it before so I can't print it in the correct way. It works with SetTimeout but I want to do it in more professional way. How can I do it synchronous??

fetchOrders(){
    let orders = [];
    let status;
    this.setState({loading:true});
    http.get('/api/amazon/orders')
        .then(response => {
            if (response.status === 200) status = 200;
            orders = response.data;
            orders.map(order => {
                order.SellerSKU = "";
                http.get(`/api/amazon/orders/items/${order.AmazonOrderId}`)
                    .then(res => {
                        order.SellerSKU = res.data[0].SellerSKU;
                    })
                    .catch(error => {
                        console.log(error);
                    })    
            });
            setTimeout( () => {
                this.setState({orders, error: status ? false : true, loading:false})
            }, 1000);
        })
        .catch(error => {
            this.setState({loading:false, error:true});
            console.error(error);
        });
}

Answer 1

setState can take a callback function, after finishing mutate the state it will execute the callback. So you can setState and add your 2nd API call in the callback.

Something like this:

http.get('/api/amazon/orders')
    .then(response => {
        if (response.status === 200) status = 200;
        orders = response.data;
        this.setState({orders, error: status ? false : true, loading:false}, 
          () => {
            orders.map(order => {
              order.SellerSKU = "";
              http.get(`/api/amazon/orders/items/${order.AmazonOrderId}`)
                  .then(res => {
                    order.SellerSKU = res.data[0].SellerSKU;
                  }).catch(error => {
                    console.log(error);
                  })    
        });
    })

Please note that I just edited a dirty way, may be you need to make some adjustment to make it works.

Answer 2

In my projects, I fake a synchronous setState to avoid lot of pitfalls, making the code cleaner. Here's what I do:

class MyComponent extends React.Component {
   // override react's setState
   setState(partialState) {
      const mergedState = { ...this.state, ...partialState };
      this.state = mergedState;
      super.setState(partialState);
   }
}

Explained: before calling the true setState, the state is also set into this.state so that any reference to it before the actual update is correct.

The only downside is that you have to extend from MyComponent rather than React.Component.

Answer 3

You seem to be asking the wrong question, which is how to implement something async as sync, instead you really are trying to defer setting your state until everything is finished. (aka the XY Problem)

You don't need to make setState synchronous - you just need to leverage some promise chaining and Promise.all, which will allow you to defer the setState call until everything is finished.

In short you should be able to adapt this to something you need, applying a few more transformations to the responses:

fetchOrders() {
    http.get('/first')
        .then(r => r.data)
        .then(orders => {
            // This wraps the iterable of promises into another promise
            // that doesn't resolve until all the promises in the iterable
            // have finished.
            return Promise.all(orders.map((order) => http.get(`/second/${order.id}`).then(/* transform */))
        })
        .then(transformedOrderPromises => this.setState({ ... }); 
}