React Leaflet渲染多地图异常求助：基于浏览器定位加载地图出错

我尝试用以下代码渲染以浏览器地理定位为中心的地图，但页面出现渲染多张地图的异常。

相关代码 #

function ChangeView(props) {
  const map = useMap()
  console.log(props.center) // testing
  map.setView(props.center)

  return null
}

function Map() {
  const [center, setCenter] = React.useState([0, 0])

  React.useEffect(() => {
    navigator.geolocation.getCurrentPosition(pos => {
      setCenter([pos.coords.latitude, pos.coords.longitude])
      console.log([pos.coords.latitude, pos.coords.longitude]) // testing
    })
  }, [])

  return (
    <div className="map">
      <MapContainer
        center={[0, 0]}
        zoom={13}
        scrollWheelZoom={false}
        style={{ height: 380, width: 375 }}
      >
        <ChangeView center={center} />

        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        />
      </MapContainer>
    </div>
  )
}

异常表现 #

页面中渲染了多张地图（截图：）

核心原因 #

问题出在ChangeView组件的写法和状态更新逻辑上：

• ChangeView组件每次渲染都会直接调用map.setView()，且没有做执行时机控制。当地理定位完成后center状态更新，父组件Map重渲染，ChangeView会被重复执行，触发Leaflet多次视图更新。
• 更关键的是，ChangeView作为MapContainer的子组件，每次父组件重渲染时会被重新实例化，Leaflet会将这些重复的组件实例视为新的地图操作指令，最终导致地图容器被重复渲染、图层叠加，出现多张地图的视觉效果。

解决步骤 #

方法一：优化ChangeView组件的执行逻辑

通过useEffect监听center的变化，仅当center真正更新时才执行视图调整，避免重复触发：

function ChangeView(props) {
  const map = useMap();

  React.useEffect(() => {
    // 跳过初始的[0,0]值，仅当获取到真实定位后更新视图
    if (props.center[0] !== 0 || props.center[1] !== 0) {
      map.setView(props.center);
    }
  }, [map, props.center]);

  return null;
}

方法二：简化逻辑，直接绑定状态到MapContainer

MapContainer的center属性本身支持响应式更新，无需额外组件手动调用map.setView()，直接将状态绑定即可：

function Map() {
  const [center, setCenter] = React.useState([0, 0]);

  React.useEffect(() => {
    navigator.geolocation.getCurrentPosition(pos => {
      setCenter([pos.coords.latitude, pos.coords.longitude]);
    });
  }, []);

  return (
    <div className="map">
      <MapContainer
        center={center}
        zoom={13}
        scrollWheelZoom={false}
        style={{ height: 380, width: 375 }}
      >
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        />
      </MapContainer>
    </div>
  );
}

补充说明 #

方法二更符合React-Leaflet的设计理念，利用组件自身的响应式属性实现视图更新，代码更简洁。方法一适合需要额外自定义视图控制逻辑的场景，但必须通过useEffect做依赖监听来避免无效执行。

内容的提问来源于stack exchange，提问作者Bobby Wan-Kenobi