reagieren verliert 'diesen' Kontext innerhalb Versprechen

Question

Ich bin ziemlich neu mit reagieren und mache wahrscheinlich einen dummen Fehler. Ich versuche einen Api Call mit Axios zu machen, der ein Versprechen zurückgibt. Wenn dieses Versprechen verrechnet wird, möchte ich das Ergebnis davon an eine Funktion übergeben, die den Status für das übergeordnete Element durch einen Rückruf aktualisiert. Es scheint jedoch, dass "das" weg ist, da ich undefiniert werde. Ich denke, wie es in der Zukunft gelöst wird, gibt es keinen "diesen" Kontext mehr? Ich kann es umgehen, indem ich den Callback einem Temp zuweise und das benutze, aber es fühlt sich plump an. Hier ist der Code:

axios.get(url) 
    .then(function(response) { 
    this.props.handler(response.data.thing) 
    }) 
    .catch(function(error) { 
    console.log(error) 
    }) 

das funktioniert.

let handler = this.props.handler 
axios.get(url) 
    .then(function(response) { 
    handler(response.data.word) 
    }) 
    .catch(function(error) { 
    console.log(error) 
    }) 

Answer 1

Dies ist, wo Pfeil Funktionen in kommen Pfeil Funktionen im Grunde halten die this von oben und sie überschreiben sie nicht innerhalb der Funktion. Sie können mehr über die MDN lesen. Denken Sie daran, es ist eine neuere Funktion, so dass einige ältere Browser es nicht unterstützen.

Der folgende Code ist ein Beispiel mit Pfeilfunktionen basierend auf Ihrem Code in Ihrer Frage.

axios.get(url) 
    .then((response) => { 
    this.props.handler(response.data.thing) 
    }) 
    .catch((error) => { 
    console.log(error) 
    }) 

Edit:

Der andere Weg, dies ohne ES6 Syntax zu tun ist durch eine Variable außerhalb der Funktion zu setzen. Das andere Beispiel, das Sie in Ihrer Frage angegeben haben, funktioniert auch dann, wenn Pfeilfunktionen nicht unterstützt werden. Sie können aber auch den folgenden Code verwenden.

var self = this; 
axios.get(url) 
    .then(function (response) { 
    self.props.handler(response.data.thing) 
    }) 
    .catch(function (error) { 
    console.log(error) 
    }) 

So können Sie die richtige this Zugriff erstellt die Variable unter Verwendung von (self). Natürlich ist der Nachteil, wie bereits erwähnt, dass es etwas klobiger und nicht so sauber ist wie eine Pfeilfunktion.

Weitere Informationen zur Browserkompatibilität mit Arrow-Funktionen finden Sie unter Can I use. Obwohl Sie React verwenden, besteht die Wahrscheinlichkeit, dass Sie Babel als Compiler verwenden, der die ES6-Syntax konvertieren und browserkompatibler machen sollte.