ReactJS setState

Question

I have a question to ask, hopefully can get help from someone.

I am using ReactJS to develop a web. I face one problem which is related to setState . I will show my code instead of explain so much word.

First, in componentDidMount function I call this.GetDefaultAddress() function to get the default Address from API first. In the this.GetDefaultAddress() function, when API is done calling, the returned data I direct setState for later use instead of keep calling API. After that, I call setDefaultAddress function which is set all the information to the forms. However, when proceed to the setDefaultAddress function, there is some error prompt up said that the state is null. I notice that when a setState is performed, the state does not change directly. So my setDefaultAddress should put in which function so that the function can get the latest state.

componentDidMount() {
  $(document).ready(function () {
   this.GetDefaultAddress();

   this.SetDefaultAddress();
  }
}

This is the GetDefaultAddress which is get data from API function.

GetDefaultAddress(){
    $.ajax({
        type: "GET",
        url: "/api/User/GetDefaultAddress",
        contentType: "application/json;charset=utf-8",
        error: function (err) {
            //console.log(err);
            // $("#overlay").hide();
            swal("Error", "Get Default Address Error. Please try again", "error");
        }
    }).done(function (data) {
        //console.log(data);
        if(data.data != null){
            console.log(this.state.quickQuote);
            this.setState(function(prevState, props) {
                return {
                    parcelNumber:prevState.parcelNumber,
                    pickup: prevState.pickup,
                    deliveryType: prevState.deliveryType,
                    quotePrice: prevState.quotePrice,
                    shipment: prevState.shipment,
                    quickQuote: prevState.quickQuote,
                    defaultAddress: data.data
                };
            });
        }else{
            //no default address found.
        }
    }.bind(this))
}

This is the SetDefaultAddress Function.

SetDefaultAddress(){
    $("#sender1-name").val(this.state.defaultAddress.Name);
    $("#sender1-contactNo").val(this.state.defaultAddress.ContactNo);
    $("#sender1-email").val(this.state.defaultAddress.Email);
    $("#sender1-address1").val(this.state.defaultAddress.Address1);
    $("#sender1-address2").val(this.state.defaultAddress.Address2);
    $("#sender1-postcode").val(this.state.defaultAddress.Postcode);

    var opt = document.createElement("option");
    opt.value = this.state.defaultAddress.LocationID;
    opt.innerHTML = this.state.defaultAddress.Location;
    $("#sender1-location").append(opt);
    $("#sender1-location").val(this.state.defaultAddress.LocationID).trigger("change");
    $("#sender1-postcode").PostcodeFuzzySearch($("#sender1-city"), $("#sender1-location"), $("#sender1-state")); 
}

Answer 1

ajax是异步的，应将SetDefaultAddress（）插入GetDefaultAddress（）的done（）或setState回调中。