在 React-Native 中访问 this.state

IT技术 javascript reactjs react-native setstate
2021-05-06 13:04:48

嗨,我是 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>
       );
    }
}
2个回答

在 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
}

按照从低到高的顺序。

引自React Docs

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

这不是 React 特定的行为;它是 JavaScript 中函数如何工作的一部分。一般来说,如果你引用一个没有()在它后面的方法,比如onClick={this.handleClick},你应该绑定那个方法。