如何在反应中获取位置信息？

Question

我想通过使用Geolocation APIReact 获得位置信息。

我button在此代码中获取了位置信息。

import React, { Component } from 'react'

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      latitude: null,
      longitude: null,
    }
  }

  position = async () => {
    await navigator.geolocation.getCurrentPosition(
      position => this.setState({ 
        latitude: position.coords.latitude, 
        longitude: position.coords.longitude
      }), 
      err => console.log(err)
    );
    console.log(this.state.latitude)
  }

  render() {
    return (
      <div>
        <button onClick={this.position} className='Filter'>Filter</button>
      </div>
    );
  }
}

export default App;

一旦按a button，控制台就会显示出来null。但是，当我button再次按a 时，控制台将显示位置信息。

您是否知道为什么我第一次无法获得位置信息？

Answer 1

setState 是一个异步函数。

position第一次调用时，状态最终会更新。它已经第二次出现了，这就是为什么它被记录了。

您可以将日志记录移到的第二个参数setState，这是一个回调。

this.setState({ 
    latitude: position.coords.latitude, 
    longitude: position.coords.longitude
  }, newState => console.log(newState))