react-leaflet-draw获取坐标后useState设置状态滞后不生效问题

问题本质 #

React的状态更新是异步批量执行的，调用setCoords后不会立即修改当前渲染闭包中的coords变量，需要等待当前回调函数执行完成后触发组件重渲染，下一次渲染时才能拿到更新后的coords值。你在created回调内setCoords后立刻打印的coords始终是当前渲染周期的旧值，因此会出现更新滞后一步的现象。

修复方案 #

• 若需要获取更新后的状态做后续处理，通过useEffect监听coords变化触发逻辑：

import { useEffect } from 'react';

function MyMap({ floorsByBuilding }: MyMapProps) {
  const [coords, setCoords] = useState<any[]>([]);

  // 监听coords变化，拿到最新值
  useEffect(() => {
    console.log("最新Coords:", coords);
    // 此处写依赖最新coords的逻辑，比如提交接口、坐标计算等
  }, [coords]);

  const created = (e) => {
    const coordsList = e.layer.editing.latlngs[0][0];
    console.log("coordsList:", coordsList);
    // 存入状态时建议深拷贝，避免leaflet内部修改原对象污染状态
    setCoords(coordsList.map(item => ({...item})));
  };

  return (
    <div className="mapview">
      <div className="myMap">
        <Map center={[0, 0]} zoom={1}>
          <FeatureGroup>
            <EditControl
              position="topright"
              draw={{
                rectangle: false,
                circle: false,
                circlemarker: false,
                polyline: false,
              }}
              onCreated={created}
            />
          </FeatureGroup>
        </Map>
      </div>
    </div>
  );
}

• 若仅需要在created回调内使用刚生成的坐标，直接使用已经拿到的coordsList变量即可，无需从状态中取值。

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