This.state undefine nach fetch()

Question

ich ein Problem habe, nachdem ich meine this.state ist undefine mit holen, und ich verstehe nicht, warum ....

googlePOI(center) { 
     this.setState({markerPOI: []}); 
     var i = 0; 
     let call = ''; 
     call = call.concat(URL_POI, center.lat.toString(), ',', center.lng.toString(), ARG_POI, this.state.filters[i], KEY); 
     console.log(this.state) // DEFINE ! 
     fetch(call) 
      .then((answer) => answer.json()) 
      .then(function(answer) { 
       console.log(this.state) // UNDEFINE ! 
       answer.results.map((item, index) => { 
        let geo = item.geometry.location; 
        let marker = <MapView.Marker title={item.name} coordinate={{latitude: geo.lat, longitude: geo.lng}} /> 
       }) 
      }).catch(function(error) { 
       console.log("ERROR: fetch googlePOI -> "+error); 
      }) 

    } 

Answer 1

Dies liegt daran, wenn der Rückruf Wird die Verheißung genannt, ändert sich der interne Kontext der Funktion. Mit anderen Worten: this ist nicht mehr das, was es einmal war! Sie können eine console.log(this) tun und Sie werden es selbst herausfinden.

Die einfachste Lösung wäre eine Referenz von this auf der Oberseite zu halten:

var me = this; 

fetch(url).then(function() { 
    console.log(me.state) 
}); 

Sie können auch diese binden mit der Callback-Funktion:

fetch(url).then(function() { 
    console.log(this.state) 
}.bind(this)); 

oder die vorgeschlagene Art und Weise zu Verwenden Sie ES2015 Pfeile:

fetch(url).then(() => { 
    console.log(this.state) 
}); 

Für Bildungszwecke würde ich su ggest einen Artikel wie what is this