React-Leaflet-Draw组件引发无上下文提供者错误排查求助

核心排查与解决方向 #

1. 确认依赖版本无冲突

你的react-leaflet-draw@0.19.7适配react-leaflet@2.x和leaflet@1.3.x，但需排查是否存在多版本嵌套安装问题：
执行命令检查依赖树：

npm ls leaflet
npm ls react-leaflet

若出现重复版本，执行清理重装：

rm -rf node_modules package-lock.json
npm install

2. 必须导入Leaflet Draw样式文件

缺少样式文件会导致组件初始化异常，触发上下文错误。在地图组件文件顶部添加：

import 'leaflet/dist/leaflet.css';
import 'leaflet-draw/dist/leaflet.draw.css';

3. 确保EditControl在Map上下文作用域内

虽你的代码已将EditControl包裹在FeatureGroup（且在Map内），但需注意：

• 不要将EditControl放在Map外部的异步加载/条件渲染逻辑中（除非确保Map已完全初始化）
• 尝试移除Map的手动ref，改用react-leaflet提供的useMap钩子获取实例，避免干扰上下文传递

4. 延迟渲染EditControl直到Map初始化完成

用状态监听Map就绪状态，确保Map完全初始化后再渲染EditControl：

import { Map, Marker, FeatureGroup, EditControl, Circle, useMap } from 'react-leaflet';
import { useEffect, useState } from 'react';

function MapComponent() {
  const [mapReady, setMapReady] = useState(false);
  const map = useMap();

  useEffect(() => {
    if (map) setMapReady(true);
  }, [map]);

  // ... 其他业务代码

  return (
    <Map className="map-container" center={CENTER} zoom={DEFAULT_ZOOM} maxZoom={MAX_ZOOM}>
      <div className="vignette"></div>
      <Marker position={CENTER} />
      <FeatureGroup>
        {mapReady && (
          <EditControl 
            onCreated={_onCreated}
            onDeleted={_onDeleted}
            draw={{
              polyline: false,
              polygon: false,
              rectangle: false,
              marker: false,
              circlemarker: false
            }}
            edit={{ edit: false }}
          />
        )}
        {/* Circle组件代码保持不变 */}
      </FeatureGroup>
    </Map>
  )
}

5. 优化sessionStorage读取逻辑

将sessionStorage读取移到组件初始化阶段，避免在render中直接调用：

const [coverageCoords, setCoverageCoords] = useState(null);

useEffect(() => {
  const coords = sessionStorage.getItem("coverageCoordinates");
  if (coords) setCoverageCoords(JSON.parse(coords));
}, []);

// 渲染Circle时使用state值
{coverageCoords && (
  <Circle 
    center={coverageCoords}
    color="#00FFFF"
    opacity={0.4}
    radius={radius * MILES_TO_METERS}
  />
)}

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