Javascript 在移动到目标位置之前，在同一位置进行贴图渲染

我的地图在移动到用户选择的目的地之前加载到同一位置。我尝试了所有的方法，我觉得这一次的改变有些不对劲，但我找不到答案

我想要实现的是通过按钮触发输入，在mapbox api中搜索位置并返回坐标，然后将位置移动到target.value

export default function Map() {
  
    const mapContainer = useRef(null);
    const [lng, setLng] = useState(1.43278);
    const [lat, setLat] = useState(38.90889);
    const [zoom, setZoom] = useState(9);
  
    const [searchValue, setSearchValue] = useState("");
  
    useEffect(() => {
      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));
      });
    }, []); // eslint-disable-line react-hooks/exhaustive-deps
  
    const handleChange = (event) => {
      event.preventDefault();
      setSearchValue(event.target.value);
    };
    
    const changeMapCenter = () => {
      const map = new mapboxgl.Map({
        container: mapContainer.current,
        style: "mapbox://styles/mapbox/streets-v11",
        center: [lng, lat],
        zoom: zoom,
      });
  
      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);
  
          setLng(coordinates[0]);
          setLat(coordinates[1]);
          new mapboxgl.Marker().setLngLat([lng, lat]).addTo(map);
        });
    };
  
    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>
    );
  }

导出默认函数映射（）{
const mapContainer=useRef（null）；
const[lng，setLng]=useState（1.43278）；
const[lat，setLat]=useState（38.90889）；
const[zoom，setZoom]=useState（9）；
常量[searchValue，setSearchValue]=useState（“”）；
useffect（（）=>{
常量映射=新的mapboxgl.map({
容器：mapContainer.current，
样式：“mapbox://styles/mapbox/streets-v11",
中心：[液化天然气，拉丁美洲]，
缩放：缩放，
});
addControl（新的mapboxgl.NavigationControl（），“右上”）；
map.on（“移动”，（）=>{
setLng（map.getCenter（）.lng.toFixed（4））；
setLat（map.getCenter（）.lat.toFixed（4））；
setZoom（map.getZoom（）.toFixed（2））；
});
}，[]）；//eslint禁用行反应挂钩/deps
常量handleChange=（事件）=>{
event.preventDefault（）；
setSearchValue（事件目标值）；
};
常量changeMapCenter=（）=>{
常量映射=新的mapboxgl.map({
容器：mapContainer.current，
样式：“mapbox://styles/mapbox/streets-v11",
中心：[液化天然气，拉丁美洲]，
缩放：缩放，
});
回传(
`${MAPBOX\u PLACES\u API}${searchValue}${REST\u PLACES\u URL}`，
获取标题
)
.然后（（res）=>res.json（））
.然后（（apiData）=>{
log（“apidata=>”，apidata）；
常量坐标=apiData.features[0]。中心；
log（“坐标=>”，坐标）；
设置lng（坐标[0]）；
setLat（坐标[1]）；
新的mapboxgl.Marker（）.setLngLat（[lng，lat]）.addTo（map）；
});
};
返回(
经度：{lng}纬度：{lat}缩放：{Zoom}
创建您的现货集合
changeMapCenter（）}>搜索并创建
);
}

您需要先获取坐标，然后创建地图

const changeMapCenter = async () => {

      const results = await fetch(`${MAPBOX_PLACES_API}${searchValue}${REST_PLACES_URL}`,FETCH_HEADERS).then(res => res.json())

     const coordinates = results.features[0].center
      setLng(coordinates[0]);
      setLat(coordinates[1]);

      const map = new mapboxgl.Map({
        container: mapContainer.current,
        style: "mapbox://styles/mapbox/streets-v11",
        center: [coordinates[0], coordinates[1]], //do not use state lat and lng here and expect it to change, it doesn't.
        zoom: zoom,
      });
  //do not use the state lat and lng here because it's not ready yet since it's async. You need to use coordinates[0]and [1]
    };

---

如果我弄错了，请反转坐标[0]和坐标[1]。

我非常感谢，你是最好的。痛苦解决的小时数@SomeoneSpecialremember当您使用

新mapboxgl

时，您需要在更改中心时重新声明

新mapboxgl

，如果不使用

设置中心

。使用类似于

lat

和

lng

的状态并期望其改变，则不起作用。