React Native - Navigatorが異なるメソッド間で矛盾します

Question

私は最初のReact Native Appを作成しています。私はさまざまなビュー間を移動するためにナビゲータオブジェクトを使用しようとしています。

下記のコードスニペットにあります。 openRecipeの完璧な作品を書かれた方法が、GoBackの方法が 未定義を言って例外がスローされますが（this.props.navigatorを評価する）オブジェクト

ではありません私は当初、Iコンポーネント・クラスに任意の小道具を追加していませんOpenRecipeメソッドが正常に動作するので、なぜgoBackがopenRecipeメソッドと同じメソッド本体を持つ例外をスローしているのか混乱しています。

依存関係を含まないことに問題があった場合は、どちらの方法でも一貫しているはずです。

ソートが完了したら、this.props.navigator.pop（）を使用して前のページに戻ることを計画しています。

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

あなたのコンポーネントがES6クラスとして実装されている場合は、goBack方法が自動的にReact.createClassを自動的に行い、あなたのオブジェクトのthisインスタンスにバインドされていません。解決策は、詳述すると、ラムダが定義されている、またはonPress={this.goBack.bind(this)}

で明示的にバインドする値にthisを結合するonPress小道具（例えばonPress={() => this.goBack()}）、として「脂肪矢印」ラムダに渡すことのどちらかであります今、私は携帯電話のキーボードではないよということ... JavaScriptで

、thisの値は、関数（またはメソッド）文脈に依存がと呼ばれ、ではないそれが定義されています場所。関数がオブジェクト（メソッド）のプロパティである場合、とと呼び出されます。thisはおそらく期待される値です。このメソッドを含む親オブジェクトです。

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

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

しかし、私は変数にsayHello機能を保存し、「外部」オブジェクトのコンテキストからそれを呼び出す場合、thisの値は、あなたがから関数を呼び出している場所に依存します。グローバルスコープで実行している場合（グローバル関数やノードreplなど）、thisはグローバルオブジェクト（Mathなどの言語組み込み関数が存在します）になります。それはname性が起こる場合を除き、あなたはthis.nameためundefinedを取得します：

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

あなたが一時的に別のものにthisの値を設定するFunctionタイプの.apply方法を使用することができます。

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

それとも、あなたがthisの値を設定し、それを持続させるために.bindを使用することができます。

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

ES6で導入された「太い矢印」のラムダは、thisの値を取得します。どこで呼び出す場合でも、thisはラムダが定義されたときと同じ値になります。そのため、第2のonPressハンドラが機能しますが、最初のハンドラは機能しません。 () => this.openRecipe(data)の本文の中でthisは、.renderメソッドの中にあった値に自動的にバインドされます。しかし、this.goBackを渡すと、そのコンテキストを失います。thisは、イベントハンドリングシステムによって関数が呼び出されたときに異なる値を持ちます。