react本机mapbox getCenter不工作

import React, { useEffect, useRef } from 'react';
import mapboxgl from 'mapbox-gl';

mapboxgl.accessToken = 'your-access-token';

const Map = () => {
  const mapContainerRef = useRef(null);

  useEffect(() => {
    const map = new mapboxgl.Map({
      container: mapContainerRef.current,
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [lng, lat], // 初始中心点坐标
      zoom: 12,
    });

    map.on('load', () => {
      const center = map.getCenter();
      console.log(center);
    });
  }, []);

  return <div ref={mapContainerRef} style={{ height: '400px' }} />;
};

export default Map;

import React, { useEffect, useRef } from 'react';
import mapboxgl from 'mapbox-gl';

mapboxgl.accessToken = 'your-access-token';

const Map = () => {
  const mapContainerRef = useRef(null);

  useEffect(() => {
    const map = new mapboxgl.Map({
      container: mapContainerRef.current,
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [lng, lat], // 初始中心点坐标
      zoom: 12,
    });

    map.on('load', () => {
      // 执行其他地图相关操作
    });
  }, []);

  useEffect(() => {
    if (mapContainerRef.current) {
      const map = new mapboxgl.Map({
        container: mapContainerRef.current,
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [lng, lat], // 初始中心点坐标
        zoom: 12,
      });

      map.on('load', () => {
        const center = map.getCenter();
        console.log(center);
      });
    }
  }, []);

  return <div ref={mapContainerRef} style={{ height: '400px' }} />;
};

export default Map;