React+Mapbox实现地点搜索跳转时地图始终停在初始位置如何解决

• 未全局存储Mapbox实例：你在useEffect中初始化的地图实例是局部变量，外部函数无法访问，changeMapCenter 中重复新建地图实例，导致原有地图状态被覆盖，也无法操作原始地图跳转。
• React state更新不会自动同步到Mapbox：Mapbox是第三方非受控组件，仅修改lng、lat的state值不会触发地图本身的视图更新，必须主动调用Mapbox官方提供的视图操作方法。
• setState异步导致取值错误：你在执行setLng、setLat后立即读取lng、lat的值，拿到的还是更新前的旧值，导致标记点位也不正确。

1. 新增ref存储全局唯一的地图实例，避免重复初始化
2. 拿到接口返回的坐标后，主动调用Mapbox的flyTo（带动画）或setCenter方法跳转视图
3. 直接使用接口返回的坐标值添加标记，避免异步state的取值问题

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

// 此处替换为你自己的配置常量
const MAPBOX_PLACES_API = '你的Mapbox地点查询接口前缀';
const REST_PLACES_URL = '你的接口后缀';
const FETCH_HEADERS = {};
mapboxgl.accessToken = '你自己的Mapbox授权Token';

export default function Map() {
    const mapContainer = useRef(null);
    // 新增ref存储地图实例
    const mapRef = useRef(null);
    const [lng, setLng] = useState(1.43278);
    const [lat, setLat] = useState(38.90889);
    const [zoom, setZoom] = useState(9);
    const [searchValue, setSearchValue] = useState("");

    useEffect(() => {
      // 避免重复初始化
      if (mapRef.current) return;
      const map = new mapboxgl.Map({
        container: mapContainer.current,
        style: "mapbox://styles/mapbox/streets-v11",
        center: [lng, lat],
        zoom: zoom,
      });
      map.addControl(new mapboxgl.NavigationControl(), "top-right");
      map.on("move", () => {
        setLng(map.getCenter().lng.toFixed(4));
        setLat(map.getCenter().lat.toFixed(4));
        setZoom(map.getZoom().toFixed(2));
      });
      // 把实例存到ref里全局可用
      mapRef.current = map;
    }, []);

    const handleChange = (event) => {
      event.preventDefault();
      setSearchValue(event.target.value);
    };
    
    const changeMapCenter = () => {
      // 删除重复新建地图的逻辑
      return fetch(
        `${MAPBOX_PLACES_API}${searchValue}${REST_PLACES_URL}`,
        FETCH_HEADERS
      )
        .then((res) => res.json())
        .then((apiData) => {
          console.log("apidata=>", apiData);
          const coordinates = apiData.features[0].center;
          console.log("coordinates=>", coordinates);
          // 更新state用于侧边栏数值展示
          setLng(coordinates[0]);
          setLat(coordinates[1]);
          // 主动调用地图跳转方法，可自定义动画参数
          mapRef.current.flyTo({
            center: coordinates,
            zoom: 12,
            essential: true
          });
          // 直接用接口返回的坐标添加标记，避免异步state取值滞后
          new mapboxgl.Marker().setLngLat(coordinates).addTo(mapRef.current);
        });
    };

    return (
      <div className="mapBox">
        <div className="sidebar">
          Longitude: {lng} | Latitude: {lat} | Zoom: {zoom}
          <div>
            <label>create your spot collection</label>
            <input
              type="text"
              id="spotLocation"
              onChange={handleChange}
              value={searchValue}
            />
            <button onClick={()=>changeMapCenter()}>search and create </button>
          </div>
        </div>
        <div className="map-container" ref={mapContainer} />
      </div>
    );
}

内容的提问来源于stack exchange，提问作者foxDev