在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} ，則應該綁定該方法。