为什么'this.data'超出范围？

Question

我有一个按钮，它调用onApproximateAgePress过程，该过程无法看到“this.data”。

<Button title="<20" onPress={onApproximateAgePress}/> 

onApproximateAgePress() { 
    console.log('onApproximateAgePress') ; // outputs onApproximateAgePress 
    console.log(this.data) ; // outputs null 
} 

    // Getter for "Immutable.js" state data... 
    get data() { 
    return this.state.data; 
    } 

    // Setter for "Immutable.js" state data... 
    set data(data) { 
    this.setState({ data }); 
    } 

    state = { 
     data: fromJS({ 
     showApproximateAgePicker: false, 

     ... 

    }), 
} 

我有其他组件已经以类似的方式连接起来，但他们确实看到this.data。

如果我改变调用

<Button title="<20" onPress={(e)=>console.log(this.data) }/> 

我得到的日志，与有效值。

为什么'this.data'超出范围？

Answer 1

那么在这两种选择中，有一个主要区别，第一种方法是您只是将回调分配给onPress事件，而第二种方法则是使用箭头功能。 那么箭头函数做什么？为起动它结合的“本”的词法作用域，在第二种情况下，以所述块，其中要记录this.data

阅读更多：）Arrow Functions

所以this你在onApproximateAgePress参照（不等于当前这个组件的实例，你应该绑定它。

或 解决方案一：<Button title="<20" onPress={this.onApproximateAgePress.bind(this)}/>

解决方法二：<Button title="<20" onPress={() => onApproximateAgePress()}/>

您应该能够访问此，因此this.data