React-leaflet v3.1.0搜索框报TypeError 如何复用已建地图实例

触发TypeError: Object(...) is not a function的核心原因不是地图实例不互通，常见诱因有两个：

1. 本地安装的leaflet-geosearch版本和你写的导入语法不匹配：该包在v3版本后拆分了导出模块结构，沿用旧版从包根目录导入的写法，会拿到非函数的导出对象，直接触发类型报错
2. 对React-Leaflet v3的实例共享逻辑存在误解：MapContainer通过whenCreated回调暴露的地图实例，和子组件内通过useMap钩子拿到的地图实例，是同一个全局对象，不存在双实例并行的问题。你当前把LeafletgeoSearch放在MapContainer子节点的写法，本身已经实现了同一实例的复用。

• 调整导入路径匹配本地leaflet-geosearch版本：
  如果使用v3.x及以上版本，不要从包根目录直接导出GeoSearchControl和OpenStreetMapProvider，要按拆分后的模块路径导入：

  import { GeoSearchControl } from "leaflet-geosearch/dist/control";
  import { OpenStreetMapProvider } from "leaflet-geosearch/dist/providers/openStreetMapProvider.js";
  

• 优化代码结构避免无效副作用：
  不要把FlyToButton、LeafletgeoSearch这类子组件定义写在Map组件的函数体内——这种写法会导致每次Map组件状态更新时，重新生成所有子组件，触发搜索控件的重复挂载、重复卸载逻辑。把这些子组件移到Map组件外部定义，需要依赖的map、icon、更新状态的回调通过props传入即可。
• 补充健壮性判断：
  • 给所有调用map方法的位置加空值校验，避免map还未初始化完成时触发运行时报错
  • 给LeafletgeoSearch内的useEffect补全依赖项（map、icon），不要用eslint注释硬屏蔽依赖检查，避免闭包拿到过期的引用值
  • 搜索组件内不需要单独定义map变量，直接使用useMap返回的实例即可，不需要把外层whenCreated存的map从外层传进来。

你可以在whenCreated的回调、以及LeafletgeoSearch的useEffect里分别打印地图实例的_leaflet_id属性，两个位置输出的ID完全一致，即可证明拿到的是同一个地图对象，不存在实例不互通的问题。

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