Zustand wird nicht aktualisiert nach AJAX-Aufruf mit setState()

Question

Ich bekomme nicht den Status aktualisiert, nachdem Sie einen AJAX-Aufruf in ComponentDidMount. Mein API-Anruf gibt die korrekten Daten zurück.

Irgendwelche Ideen, wenn ich SetState in falscher Lebenszykluskomponente mache? Die AJAX-Anfrage in der Komponente didMount erstellen und dort auch den neuen Status festlegen. Im Konstruktor habe ich den Zustand leere 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 Reaktion, werden Sie Ajax-Callback-Funktionen an die Komponente (die .bind(this))

Sie wussten, dass diese und getan haben ähnliche Sache in Ihrem binden müssen Konstruktor, aber für die jquery ajax, wird es ein bisschen anders aussehen: (und das self Variable ist nicht notwendig, hier)

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

ich habe den obigen Code getestet und es funktioniert. Möglicherweise müssen Sie den Rückruf error nicht binden, da Sie noch nichts mit der Komponente tun, aber vielleicht ist es noch notwendig, wenn Sie dort weitere Aktionen durchführen möchten!

Wenn dies noch nicht funktioniert, bitte kommentieren Sie hier die Fehler auf Ihrer Konsole, danke!

ADDED Änderung:

Bitte entfernen Sie den Ajax-Aufruf in Ihrem componentWillUpdate, die eine "für immer" Schleife erstellen:

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

Der Grund dafür ist: tatsächlich, nachdem ein Zustand eingestellt wird, componentWillUpdate() wird ausgeführt, und hier, wenn Sie den Ajax-Aufruf erneut ausführen, danach wird es SetState erneut, dann wird die Schleife für immer dauern!