React - Setzen des Zustands mit Daten funktioniert nicht/setzt es auf ein leeres Array - warum?

Question

Ich versuche, Daten zu durchlaufen und in meiner Reactive App anzuzeigen. Mein Code funktioniert, bis ich die Ergebnisse im Status der Komponenten gespeichert habe. Irgendwie (ich markierte es den Code als 'HIER ES FUNKTIONIERT NICHT mehr' als schwer zu erklären. Ich habe meinen tatsächlichen Code umgeschrieben, weil ich nicht Hunderte von Zeilen Code hier posten wollte :) und auch die Daten ausgetauscht (Ich erhalte tatsächlich eine HTTP-Anfrage) mit einem Objekt (das ich nur in der Größe änderte) - also bitte nicht darauf achten, wenn einige Teile des Codes komisch aussehen/zu viel, da mein tatsächlicher Code viel größer ist. Ich habe hier auch einen Codepen-Link hinzugefügt - wo Sie nichts sehen können (weil es nicht funktioniert), aber ich habe console.logs hinzugefügt, damit Sie sehen können, was ich meine. Vielen Dank für jede Hilfe !!

https://codepen.io/helloocoding/pen/vWVLmp?editors=1010

class App extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      data: PricedItineraries, 
      result: [] 
     } 
     this.handleInput = this.handleInput.bind(this); 
     this.showSearchResults = this.showSearchResults.bind(this); 
    } 

    showSearchResults(obj) { 
     console.log("func", this.state.data) 
     var allTrips = []; 
     var TotalPriceTemp = []; 

     for (var i = 0; i < obj.length; i++) { 
      var o = obj[i]; 
      allTrips.push(o.AirItinerary.OriginDestinationOptions.OriginDestinationOption) 

      var totalFair = o.AirItineraryPricingInfo.PTC_FareBreakdowns.PTC_FareBreakdown.PassengerFare.TotalFare; 
      TotalPriceTemp.push(totalFair.Amount); 
     } 

     for (var i = 0; i < allTrips.length; i++) { 
      var MarketingAirlineTo = []; 
      var MarketingAirlineBack = []; 
      var TotalPrice = 0; 
      var oneWay = allTrips[i][0]; 
      var returnTrip = allTrips[i][1]; 

      oneWay.FlightSegment.forEach(function (flightTo) { 
       MarketingAirlineTo.push(flightTo.MarketingAirline.Code); 
      }) 

      returnTrip.FlightSegment.forEach(function (flightTo) { 
       MarketingAirlineBack.push(flightTo.MarketingAirline.Code) 
      }) 

      TotalPriceTemp.forEach(function (item) { 
       TotalPrice += item; 
      }) 
      var tempFlightsObject = []; 

      tempFlightsObject.push({ 
       marketingAirlineTo: MarketingAirlineTo, 
       marketingAirlineBack: MarketingAirlineBack, 
       TotalPrice: TotalPriceTemp[i] 
      }) 
      console.log("tempFlightsObject", tempFlightsObject) 
      this.setState({ 
       result: tempFlightsObject 
      }) 
      console.log("result", this.state.result) 
      //HERE IT DOESNT WORK ANYMORE: TEMPFLIGHTOBJECT shows correct data, but result doesn't 
     } 
    } 

    handleInput() { 
     console.log("handeInput func", this.state.data) 
     this.showSearchResults(this.state.data); 
     console.log("handeInput func -result", this.state.result) 
    } 

    render() { 
     const flights = this.state.result.map((item, i) => { 
      return (
       <div> 
        <div key={i}><p> {item.marketingAirlineTo} </p></div> 
       </div> 
      ) 
     }) 

     return (
      <div> 
       <button onClick={this.handleInput}>click me</button> 
       <div> {flights}</div> 
      </div> 
     ) 
    } 
} 


React.render(<App />, document.getElementById('app')); 

Answer 1

setState ist eine asynchrone Funktion. Reagieren Sie Batch-Updates aus Performance-Gründen zusammen. Weitere Informationen finden Sie unter https://reactjs.org/docs/react-component.html#setstate.

Ihre Komponente sollte erneut rendern, aber Sie können den Status möglicherweise nicht unmittelbar nach dem Festlegen protokollieren. Wenn Sie möchten, können Sie einen Rückruf als zweites Argument zu setState hinzufügen, das state als sein erstes und einziges Argument benötigt.

Answer 2

setState können asynchron ausgeführt werden durch reagieren auf Batch-Updates und optimieren die Leistung.

---

können Sie einen Rückruf zur Verfügung stellen zu setState, die aufgerufen wird, sobald das Update tatsächlich abgeschlossen:

this.setState({ 
    result: tempFlightsObject 
}, function() { console.log("result", this.state.result) }) 

Answer 3

setState chargiert werden.

this.setState({ result: tempFlightsObject },() => { console.log("result", this.state.result) })

arbeiten