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}，则应绑定该方法。

在React-Native中访问this.state

2 个答案: