Native reagieren - Navigator inkonsistent über verschiedene Methoden

Question

Ich erstelle meine erste React Native App. Ich versuche, das Navigatorobjekt zum Navigieren zwischen verschiedenen Ansichten zu verwenden.

Im folgenden Codeausschnitt. Die openRecipe Methode geschrieben funktioniert perfekt, aber die goBack Methode löst eine Ausnahme zu sagen undefiniert ist kein Objekt (Bewertung this.props.navigator)

Ich habe keine Requisiten der Komponentenklasse hinzugefügt, die ich anfangs dachte, ein Problem zu sein, aber da die OpenRecipe-Methode gut funktioniert, bin ich verwirrt, warum goBack auf Ausnahme wirft, die den gleichen Methodenhauptteil wie die openRecipe Methode hat.

Wenn es ein Problem gab, Abhängigkeiten nicht einzubeziehen, sollte es für beide Methoden konsistent sein.

Sobald es aussortiert ist, plane ich, this.props.navigator.pop() zu verwenden, um zur vorherigen Seite zurückzukehren.

openRecipe(data){ 
    this.props.navigator.push({ 
     id: 'RecipePage', 
     name: 'Recipe', 
    }); 
    } 

    goBack(){ 
    Alert.alert(
       "Here Back!", 
       ) 
    this.props.navigator.push({ 
     id: 'RecipePage', 
     name: 'Recipe', 
    }); 
    } 



    render() { 

    return (
     <View style={styles.container}> 
     <View style={styles.row}> 
      <Text style={styles.title}>Recipe</Text> 

      <TouchableHighlight onPress={this.goBack}> 
       <Text style={styles.title} >BACK</Text> 
      </TouchableHighlight> 
     </View> 

     <ListView 
     dataSource={this.state.dataSource} 
     renderRow={(data) => 
     <TouchableHighlight onPress={() => this.openRecipe(data)}> 
      <View style={styles.article_container} > 
       <Text style={styles.article_title} >{data.title}</Text> 

       <Image style={styles.article_img} 
        source={{uri: data.image_link}} 
       /> 
      </View> 
     </TouchableHighlight> 


     } 
     /> 

     </View> 
    ); 

Answer 1

Wenn Ihre Komponente als ES6 Klasse implementiert wird, wird die goBack Methode nicht automatisch auf die this Instanz des Objekts gebunden, das React.createClass automatisch tut. Die Lösung ist, entweder in einem „fetten Pfeil“ Lambda passiert als onPress prop (zB onPress={() => this.goBack()}), die this auf den Wert bindet es hat, wo das Lambda definiert ist, oder sie binden explizit mit onPress={this.goBack.bind(this)}

Zu erarbeiten , jetzt, dass ich nicht auf einer Telefontastatur bin ...

in Javascript hängt der Wert von this auf dem Kontext, in dem eine Funktion (oder Methode) genannt ist, nicht wo es definiert. Wenn eine Funktion eine Eigenschaft eines Objekts (eine Methode) ist, und als solche aufgerufen wird, hat this den Wert, den Sie wahrscheinlich erwarten; Es ist das übergeordnete Objekt, das die Methode enthält.

const person = { 
    name: 'Shaurya', 
    sayHello() { 
    return "Hi " + this.name 
    } 
} 

person.sayHello() // -> "Hi Shaurya" 

Aber wenn ich speichern die sayHello Funktion in einer Variablen und nennen es „von außen“ den Kontext des Objekt, wird der Wert von this hängt davon ab, wo Sie die Funktion von sind aufrufen. Wenn Sie im globalen Bereich arbeiten (z. B. in einer globalen Funktion oder in einem Knoten repl), wird this das globale Objekt sein (in dem Sprache wie Math live ist). Es sei denn, dass eine name Eigenschaft hat, passiert, werden Sie undefined für this.name erhalten:

let sayHi = person.sayHello 
sayHi() // -> "Hi undefined" 

Sie können die .apply Methode des Function Typs den Wert von this auf etwas anderes vorübergehend einzustellen:

sayHi.apply(person) // -> "Hi Shaurya" 
sayHi.apply({name: "Yusef"}) // -> "Hi Yusef" 
sayHi() // -> still "Hi undefined" 

Oder Sie können .bind verwenden Sie den Wert von this zu setzen und es bestehen machen:

var sayHiToPerson = person.sayHello.bind(person) 
sayHiToPerson() // -> "Hi Shaurya" 

Die in ES6 eingeführten "fetten Pfeile" lambdas erfassen den Wert this, und egal, wo Sie sie aufrufen, this haben denselben Wert wie bei der Lambda-Definition.Deshalb funktioniert Ihr zweiter onPress-Handler, aber der erste nicht. Innerhalb des Körpers von () => this.openRecipe(data) wird this automatisch an den Wert gebunden, den es innerhalb der .render-Methode hatte. Aber wenn Sie this.goBack übergeben, verlieren Sie diesen Kontext und this hat einen anderen Wert, wenn die Funktion vom Ereignisbehandlungssystem aufgerufen wird.