Question

我正在创建我的第一个React Native App。我正在尝试使用导航器对象在不同视图之间导航。

在下面的代码段中。编写的openRecipe方法完美无缺，但goBack方法抛出一个异常说法 undefined不是对象（评估this.props.navigator）

我没有向Component Class添加任何道具，我最初认为这是一个问题，但由于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方法不会自动绑定到对象的this实例，而React.createClass会自动绑定。解决方案是通过一个＆＃34;胖箭头＆＃34; lambda作为onPress prop（例如onPress={() => this.goBack()}），它将this绑定到定义lambda的值，或者用onPress={this.goBack.bind(this)}显式绑定它

详细说明，现在我不在电话键盘上......

在javascript中，this的值取决于函数（或方法）被称为的上下文，而不是它定义的位置。当一个函数是一个对象（一个方法）的属性，和它被调用时，this具有你可能期望的值;它是包含该方法的父对象。

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

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

但是，如果我将sayHello函数存储在一个变量中并从＆＃34;外部＆＃34;中调用它。在对象的上下文中，this的值将取决于您从哪里调用该函数。如果您在全局范围内运行（例如在全局函数内或在节点repl中运行），this将成为全局对象（其中内置类似Math的语言）。除非碰巧有name属性，否则undefined会获得this.name：

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

您可以使用.apply类型的Function方法暂时将this的值设置为其他内容：

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

或者，您可以使用.bind设置this的值并使其保持不变：

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

＆＃34;胖箭＆＃34; ES6中引入的lambdas捕获this的值，无论你在何处调用它，this都将具有与定义lambda时相同的值。这就是为什么你的第二个onPress处理程序有效但第一个没有处理的原因。在() => this.openRecipe(data)的正文中，this会自动绑定到.render方法中的值。但是，当您只是传递this.goBack时，您将失去该上下文，并且this在事件处理系统调用该函数时具有不同的值。

React Native - Navigator在不同方法中不一致

1 个答案: