Как вывести координаты API Geolocation из моей вложенной функции в состояние React?

Question

Я пытаюсь получить местоположение пользователя с помощью Geolocation API , когда пользователь нажимает кнопку:

<button onClick={this.setNewLatLong()}>"Use my location"</button>;

Я могу получить доступ к лат /длинные координаты со следующим кодом:

setNewLatLong = () => { 
 navigator.geolocation.getCurrentPosition(displayLocationInfo);

  function displayLocationInfo(position) {
      const longitude = position.coords.longitude;
      const latitude = position.coords.latitude;

      console.log(`long: ${longitude} | lat: ${latitude}`);
  }
}

Но я не могу получить данные в свое состояние, потому что переменные latitude и longitude слишком вложены в функции.

Как я могу получить эти данные в моем состоянии?

Answer 1

Каждое обновление состояния компонента в React должно выполняться с setState(). В вашем случае вы можете использовать setState() в функции обратного вызова, переданной в getCurrentPosition().

navigator.geolocation.getCurrentPosition(position => {
    this.setState({
        lat: position.coords.latitude,
        lng: position.coords.longitude
    });
})

Я также рекомендовал бы изучить использование React hooks для состояния (после того, как вызакончил изучение основ React)

Answer 2

В React вы держите информацию в состоянии компонента. Вы можете установить состояние следующим образом:

this.setState({
  lon: longitude,
  lat: latitude
})

И получить доступ к состоянию из своего представления (функция рендеринга) или из любого другого места, где оно может вам понадобиться.