state not updating after AJAX call using setState() - ajax

Question

I am not getting state updated after making a AJAX call in componentDidMount. My api call is returning the correct data .
Any ideas if I am doing setState in wrong lifecycle component? Making the AJAX request in the componentDidMount and also setting the new state there. In the constructor I set the state to empty arrays
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

In React, you will have to bind ajax callback functions to the component (which is .bind(this))
You knew this and have done similar thing in your constructor, but for the jquery ajax, it will look a bit different like: (and the self variable is unnecessary here)
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),
});
}
I've tested the above code and it works. You may not need to bind the error callback since you don't do anything yet to the component, but maybe it's still necessary if you want to make further actions there!
If this doesn't work yet, please comment here the errors on your console, thanks!
ADDED MODIFICATION:
Please remove the ajax call in your componentWillUpdate, which will create a "forever" loop:
componentWillUpdate(nextProps, nextState) {
//this.getDeliveryDate();
console.log('Your prev offday state: ' + this.state.offday);
console.log('Your next offday state: ' + nextState.offday);
}
The reason is: actually, after a state is set, componentWillUpdate() will be executed, and here if you run the ajax call again, after that it will setState again, then the loop will last forever!