在React-Native中访问this.state

Question

嗨，我是React的新手，所以请耐心等待。 我想将地理位置存储为州。 看起来很漂亮，因为任何位置变化都会触发渲染，这正是我想要的。 在开发过程中，我有一个按钮，通过访问lastPosition手动触发事件。 但是，当我这样做。 国家是“未定义的”。 有什么线索的原因？

export default class FetchProject extends Component {
    constructor(props) {
        super(props);
        this.state = {
            initialPosition: 'unknown',
            lastPosition: 'unknown',
        };
    }

    //code that sets lastposition
    componentDidMount() {
        ....
    }

    _onPressGET (){
        console.log("PressGET -> " + this.state); //undefined
        var northing=this.state.initialPosition.coords.latitude; 
        //triggers error
    }

    render() {
       return (    
           <View style={styles.container}>
               <TouchableHighlight onPress = {this._onPressGET} style = {styles.button}>
                  <Text>Fetch mailbox</Text>
               </TouchableHighlight>
           </View>
       );
    }
}

Answer 1

当RN使用ES6类，注意结合this - this可能不是你的想法，除非你绑定。

onPress = { this._onPressGet.bind(this) }

或者在构造函数中

constructor(props) {
  super(props);

  this.state = {
    initialPosition: 'unknown',
    lastPosition: 'unknown'
  };

  this._onPressGet = this._onPressGet.bind(this);
}

或者也许是最优雅的方式

_onPressGet = () => {
  // Function body
}

从最少到最优惠的顺序。

Answer 2

引自React Docs ：

在JSX回调中你必须要小心这个含义。 在JavaScript中，默认情况下不会绑定类方法。 如果您忘记绑定 this.handleClick并将其传递给onClick ，则在实际调用该函数时，这将是undefined的。

这不是特定于React的行为; 它是JavaScript中函数如何工作的一部分。 通常，如果您在其后引用没有()的方法，例如onClick={this.handleClick} ，则应该绑定该方法。