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

我想通过在react中使用geolocationapi来获取位置信息

我做了一个按钮来获取代码中的位置信息

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。 但是，当我再次按下按钮时，控制台显示位置信息

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

设置状态是一个异步函数

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

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

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

setState是一个异步函数

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

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

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

---

在呈现中尝试console.log，而不是在该函数中。它仍然会给出一个null，并且不会更新组件。setState有第二个参数，即一个回调，它是在设置状态后触发的，因此将console.log放入其中，就像.setState{…}，函数{console.logthis.state.latitude}@哈比婆罗门感谢你的评论。成功了！在呈现中尝试console.log，而不是在该函数中。它仍然会给出一个null，并且不会更新组件。setState有第二个参数，即一个回调，它是在设置状态后触发的，因此将console.log放入其中，就像.setState{…}，函数{console.logthis.state.latitude}@哈比婆罗门感谢你的评论。成功了！谢谢你的评论。我把setState放在componentWillMount中，我可以解决它@gnxvw您可以等待setState调用，假设您将getCurrentPosition回调声明为async。谢谢您的评论。我把setState放在componentWillMount中，我可以解决它@gnxvw假设您将getCurrentPosition回调声明为async，那么您可以等待setState调用。