获取用户经纬度位置时无法设置React状态

import React, { Component } from 'react';

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

  componentDidMount() {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        const { latitude, longitude } = position.coords;
        this.setState({ latitude, longitude });
      },
      (error) => {
        console.error(error);
      }
    );
  }

  render() {
    const { latitude, longitude } = this.state;

    return (
      <div>
        Latitude: {latitude}<br />
        Longitude: {longitude}
      </div>
    );
  }
}

export default LocationComponent;