javascript - 如何在 react 中获取位置信息？

Question

我想在 React 中使用 Geolocation API 获取位置信息。

我在这段代码中制作了一个按钮来获取位置信息。

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;

一旦我按下一个按钮，控制台就会显示null。 但是，当我再次按下 按钮 时，控制台会显示位置信息。

你知道为什么我第一次获取不到位置信息吗？

Answer 1

setState 是一个异步函数。

当您第一次调用 position 时，状态最终会更新。第二次它已经存在，这就是它被记录的原因。

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

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