如何从 componentDidMount 调用成员函数答案

【问题标题】：How do I call a member function from componentDidMount如何从 componentDidMount 调用成员函数
【发布时间】：2017-10-13 18:50:57
【问题描述】：

在调用 getCurrentPosition() 之后，我试图从 componentDidMount() 调用一个函数。如果我将位置传递给 updatePosition，则应用程序崩溃。如果我将 updatePosition 函数的内容移动到 getCurrentPosition() 中，那么它就可以工作。我需要做什么才能从 componentDidMount() 中调用成员函数。

class GeolocationViewer extends Component { 
  constructor(props) {
      super(props);

      this.state = {
        lat: 0,
        long: 0,
        heading: 0,
        accuracy: 0,
        speed: 0,
        pointCount: 0
      };
  }

  updatePostion(position) {
    var lat = position.coords.latitude;
    this.setState({lat});
  }

  componentDidMount() {
    let self = this;

    setInterval(() => {
      navigator.geolocation.getCurrentPosition((position) => {
        // this breaks
        this.updatePostion(position);

        // if I place the body of updatePosition here it works.
      },
       (error) => {},
       {enableHighAccuracy: true, timeout: 20000, maximumAge: 10000}
      );
    }, 5000);
  }

  render() {
    return (
      <View style={{flex: 1, backgroundColor: 'black'}}>
        <View style={{flex: 1, color: 'green'}}>
          <Text style={styles.green}>
            Position: {this.state.lat}, {this.state.long}
          </Text>
          <Text style={styles.green}>
            Heading: {this.state.heading}
          </Text>
          <Text style={styles.green}>
            Speed: {this.state.speed}
          </Text>
          <Text style={styles.green}>
            Accuracy: {this.state.accuracy}
          </Text>
          <Text style={styles.green}>
            Point Count: {this.state.pointCount}
          </Text>
        </View>
      </View>
    );
  }
}

【问题讨论】：

标签： javascript reactjs react-native

【解决方案1】：

实际上，一切正常！这是RNplay example 及其代码：

'use strict';

var React = require('react');
var {
  Component,
} = React;
var ReactNative = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} = ReactNative;

class GeolocationViewer extends Component { 
  constructor(props) {
      super(props);

      this.state = {
        lat: 0,
        long: 0,
        heading: 0,
        accuracy: 0,
        speed: 0,
        pointCount: 0
      };
  }

  updatePostion(position) {
    var lat = position.coords.latitude;
    this.setState({lat});
  }

  componentDidMount() {
    setInterval(() => {
      navigator.geolocation.getCurrentPosition((position) => {
        this.updatePostion(position);
      },
       (error) => {},
       {enableHighAccuracy: true, timeout: 20000, maximumAge: 10000}
      );
    }, 5000);
  }

  render() {
    console.log(this.state);
    return (
      <View style={{flex: 1, padding: 30}}>
        <View style={{flex: 1}}>
          <Text>
            Position: {this.state.lat}, {this.state.long}
          </Text>
          <Text>
            Heading: {this.state.heading}
          </Text>
          <Text>
            Speed: {this.state.speed}
          </Text>
          <Text>
            Accuracy: {this.state.accuracy}
          </Text>
          <Text>
            Point Count: {this.state.pointCount}
          </Text>
        </View>
      </View>
    );
  }
}

AppRegistry.registerComponent('SampleApp', () => GeolocationViewer);

（检查控制台日志）

【讨论】：

【解决方案2】：

'self' 没有在 updatePostion() 中定义，这就是你有错误的原因

updatePostion(position) {
    // replace self with this
    self.setState({position.coords.latitude});
}

你也不需要这个

let self = this;

在 componentDidMount() 内部，因为您使用箭头函数

【讨论】：

那是我发帖时的粗心大意。即使更新了代码，我仍然有错误（我编辑了帖子）。
你到底有哪个错误？顺便说一句，您在函数名称中有错字：updatePostion（位置而不是位置）。也许在您的真实代码中您将函数定义为 updatePosition，但使用错误的名称调用它？

【解决方案3】：

我知道这看起来很难看，但这是你在进行 react 时会遇到的常见问题。在constructor 中绑定成员函数（ES7 可能会让它看起来更好，但那将是很长的等待时间）

constructor(props) {
      super(props);

      this.state = {
        lat: 0,
        long: 0,
        heading: 0,
        accuracy: 0,
        speed: 0,
        pointCount: 0
      };

      // in your constructor, add this binding
      this.updatePostion = this.updatePostion.bind(this)
  }

【讨论】：