Управляйте LAT + LON как переменными, чтобы получить DISTANCE

Question

У меня есть рабочая закуска с моим геолокации, лат + долг.Я пытаюсь добавить функции getDistance и isPointInCircle, они работают до тех пор, пока я не захочу заменить точку myLAT + myLON.

С хорошей помощью меня рекомендуют объявлять "const {latitude, longitude}= this.state; "но я что-то упускаю, потому что все еще получаю ошибки.Я пытался поместить функции внутри и снаружи "componentDidMount ()", но я не могу заставить его работать.

import geolib from "geolib";

export default class App extends Component {

 constructor(props) {
 super(props);
 this.state = {
  latitude: null,
  longitude: null,
  speed: null,
  error: null,
};
  }    

  componentDidMount() {
  this.watchId = navigator.geolocation.watchPosition(
  (position) => {
   const { latitude, longitude } = this.state;        
      this.setState({
      latitude: position.coords.latitude,
      longitude: position.coords.longitude,
      speed: position.coords.speed,
      error: null,
    });

  },
  (error) => this.setState({ error: error.message }),
  { enableHighAccuracy: true, timeout: 20000, maximumAge: 0, distanceFilter: 1},
);
}

  componentWillUnmount() {
  navigator.geolocation.clearWatch(this.watchId);
  }

  render() {
  return (  
     <View style={styles.container}>  
    <View style={{ flexGrow: 0.3, alignItems: 'center', justifyContent: 'center' }}>          
     <Text>GeoLib:: Distance: {DIST} meters</Text> //I'd like to put the DISTANCE here 
     {this.state.error ? <Text>Error: {this.state.error}</Text> : null}           
     </View>                  
);
  }
}

  let RADIUS = geolib.isPointInCircle(                 
       { latitude: latitude, longitude: longitude },
       {latitude: 37.600530, longitude: -122.482629},
        1000
    );

   let DIST = geolib.getDistance(
       { latitude: latitude, longitude: longitude },
       {latitude: 37.600530, longitude: -122.482629}
       );

   if(RADIUS == true){
       console.log("I am in Radius.");
   }else{
       console.log("I am NOT in Radius.");
    }

Answer 1

Для доступа к значениям, находящимся в состоянии, вам нужно использовать this.state.key.Вы пытаетесь получить доступ к значениям из состояния без правильной записи.Вы также просто добавляете значения вне вашего компонента, которые полагаются на значения внутри вашего компонента, что не будет работать.

Вот как я бы реализовал ваш компонент, это всего лишь один из множества различных способов его рефакторинга.

// other import statements eg React etc. 
import geolib from 'geolib';

export default class App extends Component {
  constructor (props) {
    super(props);
    this.state = {
      latitude: null,
      longitude: null,
      speed: null,
      distance: null,
      radius: null,
      error: null
    };
  }

  componentDidMount () {
    this.watchId = navigator.geolocation.watchPosition(
      (position) => {
        const { latitude, longitude, speed } = position.coords;
        const center = { latitude: 37.600530, longitude: -122.482629 };
        const { radius, distance } = this.calculateMeasurements(latitude, longitude, center);

        this.setState({
          latitude: latitude,
          longitude: longitude,
          speed: speed,
          radius: radius,
          distance: distance,
          error: null
        });
      },
      (error) => this.setState({ error: error.message }),
      { enableHighAccuracy: true, timeout: 20000, maximumAge: 0, distanceFilter: 1 }
    );
  }

  componentWillUnmount () {
    navigator.geolocation.clearWatch(this.watchId);
  }

  /*
   * latitude: user's latitude
   * longitude: user's longitude
   * center: center of the circle eg: { latitude: 37.600530, longitude: -122.482629 }
   * this function is now reusable you don't have to hard code the center coordinates
   */
  calculateMeasurements = (latitude, longitude, center) => {
    const radius = geolib.isPointInCircle(
      { latitude: latitude, longitude: longitude },
      { latitude: center.latitude, longitude: center.longitude },
      1000
    );
    const distance = geolib.getDistance(
      { latitude: latitude, longitude: longitude },
      { latitude: center.latitude, longitude: center.longitude }
    );
    console.log(radius, distance);
    return { radius, distance };
  }

  render () {
    const { radius, distance } = this.state;

    if (radius === true) {
      console.log('I am in Radius.');
    } else if (radius === null) {
      console.log('Radius has not been calculated');
    } else if (radius === false) {
      console.log('I am NOT in Radius.');
    }

    return (
      <View style={styles.container}>
        <View style={{ flexGrow: 0.3, alignItems: 'center', justifyContent: 'center' }}>
          <Text>GeoLib:: Distance: {distance !== null ? distance : 'unknown'} meters</Text>
          {this.state.error ? <Text>Error: {this.state.error}</Text> : null}
        </View>
      </View>
    );
  }
}

1. Добавление начальных значений радиуса и расстояния в состояние
2. Удалите получение значений широты и долготы в componentDidMount, они нулевые, и вы нигде не используете значения.
3. Деконструируйте широту, долготу и скорость из position.coords.Это избавляет вас от необходимости вводить position.coords.key каждый раз, когда вы хотите использовать значение из него.
4. Создайте вспомогательную функцию calculateMeasurements, которая будет вычислять значения radius и distance, которые вы хотите.Назовите его в componentDidMount, используя координаты, которые вы только что нашли.Затем сохраните radius и distance в состояние в componentDidMount
5. Обновление render, чтобы использовать значения из состояния.
6. Исправьте отсутствующий тег </View> в render
7. Удалите let RADIUS = ... и другие вычисления снизу, так как они недопустимы в этом месте.