React-Native Anruffunktion innerhalb. Async-Funktion

Question

Ich versuche, eine Funktion aufzurufen, nachdem der Benutzer ein Bild aufgenommen hat. Ich versuche, so in der folgenden Art und Weise zu tun:

export default class LA extends Component { 
    constructor(props) { 
     super(props); 
     this.doSomething = this.doSomething.bind(this); 
    } 


    takePicture() { 
     this.camera.capture() 
     .then(function(data) { 
     doSomething(data.path); //THIS CAUSES THE RUNTIME ERROR 
     }) 
    .catch(err => console.error("error: " + err)); 
    } 

    doSomething(imgPath) { 
     console.log(imgPath); 
    } 


} 

Und bekomme ich folgende Fehlermeldung, wenn Sie ein Bild aufnehmen:

error: Reference Error: doSomething is not defined

Wenn ich jedoch ersetzen Takepicture() mit:

takePicture() { 
    this.camera.capture() 
    .then(function(data) { 
    console.log(data.path); 
    }) 
.catch(err => console.error("error: " + err)); 
} 

Der Bildpfad wird protokolliert und es tritt kein Fehler auf.

Answer 1

Sie müssen this verwenden, um eine Elementfunktion aufzurufen. Hier ist ein funktionierendes Beispiel:

export default class LA extends Component { 
    constructor(props) { 
    super(props); 
    this.doSomething = this.doSomething.bind(this); 
    } 


    takePicture() { 
    this.camera.capture() 
    .then((data) => { 
     this.doSomething(data.path); 
    }) 
    .catch(err => console.error("error: " + err)); 
    } 

    doSomething(imgPath) { 
    console.log(imgPath); 
    } 


} 

Bitte beachte, dass ich einen Pfeil Funktion verwendet haben, die korrekte this innerhalb der Callback zu verweisen.

Oder Sie können die Funktion auch direkt übergeben, so.

takePicture() { 
    this.camera.capture() 
     .then(this.doSomething) 
     .catch(err => console.error("error: " + err)); 
    } 

jedoch der letzte Ansatz wird nicht doSomething auf dem richtigen Umfang ausführen, für die Sie doSomething die Klasse binden müssen, einen Pfeil Funktion oder im Konstruktor bind verwenden. Eine dritte Option besteht darin, einen Decorator zu verwenden, um die Methode mit Babel automatisch zu binden.

Viel Glück!