setState（）を使用してAJAX呼び出し後に状態が更新されない

Question

componentDidMountでAJAX呼び出しを行った後に状態が更新されません。私のAPI呼び出しが正しいデータを返しています。

私は間違ったライフサイクルコンポーネントでsetStateを実行している場合は、任意のアイデア？ componentDidMountでAJAXリクエストを作成し、そこに新しい状態を設定します。私が反応で

class DeliveryDateInput extends React.Component { 
constructor(props) { 
    super(props); 
    this.getDeliveryDate = this.getDeliveryDate.bind(this); 

    this.state = { 
     selectDate: selectedDate || validDelDateArray[0], 
     validDeliveryDateArray: validDelDateArray, 
     firstDeliveryDay: [], 
     lastDeliveryDay: [], 
     selectedDate: [], 
     deliveryDatesAllowed: [], 
     offDays: [], 
    }; 
} 

componentDidMount() { 
    console.log('App componentDidMount'); 
    this.getDeliveryDate(); 
} 

componentWillUpdate(nextProps, nextState) { 
    this.getDeliveryDate(); 
    console.log('Your prev offday state: ' + this.state.offday); 
    console.log('Your next offday state: ' + nextState.offday); 
} 

getDeliveryDate() { 
    const self = this; 
    $.ajax({ 
     type: 'GET', 
     url: //deliveryDateAPI, 
     contentType: 'application/json; charset=utf-8', 
     success(data) { 
      self.setState({ 
       firstDeliveryDay: data.firstDeliveryDate, 
       lastDeliveryDay: data.lastDeliveryDay, 
       selectedDate: data.firstDeliveryDate, 
       deliveryDatesAllowed: data.deliveryDates, 
       offDays: data.offDays, 
      }); 
     }, 
     failure(errMsg) { 
      console.log(errMsg); 
     }, 
    }); 
} 

Answer 1

空の配列に状態を設定するコンストラクタでは、あなたが（.bind(this)ある）コンポーネントにAJAXコールバック関数をバインドする

を持っていますあなたはこのことを知っていたし、自分の中で同様のことを行っていますコンストラクタが、jqueryのAJAXのために、それは少し似て異なります：（とself変数は、ここでは不要です）

getDeliveryDate() { 
    $.ajax({ 
     type: 'GET', 
     url: //deliveryDateAPI, 
     contentType: 'application/json; charset=utf-8', 
     success: function(data) { 
      this.setState({ 
       firstDeliveryDay: data.firstDeliveryDate, 
       lastDeliveryDay: data.lastDeliveryDay, 
       selectedDate: data.firstDeliveryDate, 
       deliveryDatesAllowed: data.deliveryDates, 
       offDays: data.offDays, 
      }); 
     }.bind(this), 
     error: function(errMsg) { 
      console.log(errMsg); 
     }.bind(this), 
    }); 
} 

私は上記のコードをテストしてみたし、それが動作します。 errorコールバックをバインドする必要はないかもしれません。なぜなら、まだコンポーネントに何もしていないからです。しかし、それ以上のアクションを実行する必要があるかもしれません。

これがまだうまくいかない場合は、ここであなたのコンソールのエラーをコメントしてください！ありがとう！

ADDED修正：

"永遠" のループを作成します。あなたのcomponentWillUpdateでのAJAX呼び出しを、削除してください：

componentWillUpdate(nextProps, nextState) { 
    //this.getDeliveryDate(); 
    console.log('Your prev offday state: ' + this.state.offday); 
    console.log('Your next offday state: ' + nextState.offday); 
} 

理由です：実際には、状態が設定された後、 componentWillUpdate()が実行されます。ここでajax呼び出しを再度実行すると、そのあとでsetStateが再度実行され、ループは永遠に終了します。