在 React-Native 中访问 this.state答案

【问题标题】：Accessing this.state in React-Native在 React-Native 中访问 this.state
【发布时间】：2016-10-31 11:08:27
【问题描述】：

您好，我是 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>
       );
    }
}

【问题讨论】：

你能在你使用_onPressGet的地方显示这段代码吗？（可能是你的render 函数）。
是的。在render()。添加了上面缺少的代码。

标签： javascript reactjs react-native setstate

【解决方案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
}

按从低到高的顺序排列。

【讨论】：

谢谢。有用。（但this.state.initialPosition.coords.latitude仍然会触发错误，但那是另一回事）为什么会得到thisconfused？查看代码，在我看来，this 应该引用声明该方法的对象。
在这种情况下，this 可能是指触发函数的对象，例如按钮或文本框。
很好的答案。谢谢你

【解决方案2】：

引用自React Docs：

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

这不是 React 特有的行为；它是 JavaScript 中函数工作方式的一部分。一般情况下，如果引用的方法后面没有()，比如onClick={this.handleClick}，就应该绑定那个方法。

【讨论】：