ReactJS 设置状态答案

【问题标题】：ReactJS setStateReactJS 设置状态
【发布时间】：2017-12-13 08:38:37
【问题描述】：

我有一个问题要问，希望能得到某人的帮助。

我正在使用 ReactJS 开发网络。我面临一个与setState 相关的问题。我会展示我的代码而不是解释这么多字。

首先，在componentDidMount 函数中，我调用this.GetDefaultAddress() 函数首先从API 获取默认地址。在this.GetDefaultAddress()函数中，当API调用完毕后，返回的数据我直接setState供以后使用，而不是一直调用API。之后，我调用setDefaultAddress 函数将所有信息设置到表单中。但是，当执行setDefaultAddress 函数时，有一些错误提示向上说状态为空。我注意到当执行setState 时，状态不会直接改变。所以我的setDefaultAddress应该放在哪个函数里面，这样函数才能得到最新的状态。

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

   this.SetDefaultAddress();
  }
}

这是从 API 函数获取数据的 GetDefaultAddress。

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))
}

这是 SetDefaultAddress 函数。

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")); 
}

【问题讨论】：

拜托，拜托，拜托不要像那样混合使用 jQuery 和 React。不要使用 jQuery 修改 DOM。为此使用 React...
this.setState 有一个回调函数作为第二个参数，你用那个
1. this.setState() 会在您调用命令后的一段时间内更改状态，而不是立即更改。 2. 即使是这样，您在运行 AJAX 请求之后立即调用SetDefaultAddress，该请求也不会立即完成，而是在不久的将来的某个时候。 3.你需要确保你的this实际上是指你认为它所指的东西4.jQuery有$.getJSON，这应该会让你的ajax调用很多更短。
感谢大家帮助我找出问题并提出建议。我要解决我的问题。非常感谢大家。

标签： javascript jquery reactjs

【解决方案1】：

ajax 是异步的，你应该将 SetDefaultAddress() 放在 GetDefaultAddress() 的 done() 或 setState 回调中。

【讨论】：