Question

我想通过在反应中使用Geolocation API来获取位置信息。

我做了一个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;

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

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

Answer 1

setState是一个异步函数。

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

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

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

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

1 个答案: