获取用户lat / long位置时无法设置React状态

Question

我正在尝试获取用户的位置（可行）并将其设置为React组件中的当前状态（此部分不会）。我在这里看了几个答案，不知道我做错了什么。

这就是我所拥有的：

class Container extends Component {
  constructor() {
    super()
    this.state = {
      location: {
        lat: 0,
        lng: 0
      }
    }
  }
  componentDidMount() {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        let lat = position.coords.latitude
        let lng = position.coords.longitude
        console.log("getCurrentPosition Success " + lat + lng) // logs position correctly
        this.setState({
          location: {
            lat: lat,
            lng: lng
          }
        })
      },
      (error) => {
        this.props.displayError("Error dectecting your location");
        console.error(JSON.stringify(error))
      },
      {enableHighAccuracy: true, timeout: 20000, maximumAge: 1000}
    )
  }
  render() {
    const location = this.state.location
    return (
      <div>
         <Map center={location}/>
      </div>
    )
  }
}

它看起来与其他人的相似，我尝试了几种不同的方式，但我无法设置状态。我有什么遗漏或做错了吗？

Answer 1

setState命令工作正常。

请注意，获取位置是异步的。调用，因此render（）将被调用两次。第一次调用时，lat / lng为零。

如果要在从地理定位服务获取lat / lng后呈现输出，可以添加逻辑以检查它是否为零并返回null。