Wie rufe ich eine Member-Funktion von ComponentDidMount

Question

Ich versuche, eine Funktion von ComponentDidMount() aufzurufen, nachdem getCurrentPosition() aufgerufen wird. Wenn ich die Position an updatePosition überlasse, stürzt die App ab. Wenn ich den Inhalt der Funktion updatePosition in getCurrentPosition() verschiebe, funktioniert es. Was muss ich tun, um eine Memberfunktion von componentDidMount() aufrufen zu können?

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> 
    ); 
    } 
} 

Answer 1

'Selbst' ist nicht definiert innerhalb von updatePostion(), warum Sie den Fehler haben

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

auch nicht brauchen Sie dieses

let self = this; 

innerhalb von componentDidMount() Da Sie Pfeilfunktionen verwenden

Answer 2

Eigentlich funktioniert alles! Hier ist ein RNplay example und sein Code:

'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); 

(überprüfen Sie die Konsolenprotokolle)

Answer 3

Ich weiß, das sieht hässlich aus, aber dies ist das gemeinsame Problem, wenn Sie auf reagieren arbeiten Sie Gesicht. bind Memberfunktion innerhalb constructor (ES7 kann es besser aussehen, aber das wird lange warten müssen)

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