React-Leaflet V4结合React-Redux如何更新mapRef并修改地图缩放？

我正在使用react-leaflet 4.x版本，想通过点击外部按钮修改地图缩放级别。知道可以在<MapContainer>的子组件中用useMap()，但需要在组件外的控件修改，所以用react-redux管理状态。

已实现的代码 #

1. Redux Slice（mapViewSlice.js） #

import { createSlice } from "@reduxjs/toolkit";

export const mapViewSlice = createSlice({
  name: "mapView",
  initialState: {
    zoom: 5,
  },
  reducers: {
    changeZoom: (state, action) => {
      state.zoom = action.payload;
    },
  },
});

export const { changeZoom } = mapViewSlice.actions;
export default mapViewSlice.reducer;

2. Map组件代码 #

import React, { useState, useEffect, useRef } from "react";
import { useSelector, useDispatch } from "react-redux";
import { MapContainer, TileLayer } from "react-leaflet";
import { changeZoom } from "./mapViewSlice";
import "./Map.css";

export const Map = () => {
  const mapRef = useRef(null);
  const zoomLevel = useSelector((state) => state.mapView.zoom);
  const dispatch = useDispatch();

  return (
    <div id="map-container" className="flex-container-row">
      <MapContainer center={[37.0902, -95.7129]} zoom={zoomLevel} ref={mapRef}>
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
      </MapContainer>
      <button onClick={() => dispatch(changeZoom(2))}>Change Zoom</button>
    </div>
  );
};

遇到的问题 #

点击按钮后，zoomLevel的console输出是2，符合预期，但更新地图缩放时出现错误：

尝试1：用useEffect + mapRef #

添加以下代码后报错：

useEffect(() => {
  mapRef.current.setZoom(zoomLevel);
}, [zoomLevel]);

Cannot read properties of null (reading 'setZoom')
TypeError: Cannot read properties of null (reading 'setZoom')

尝试2：用whenReady + useState保存地图引用 #

修改代码后报错：

const [map, setMap] = useState(null)
//...

useEffect(() => {
    if (map) {
      console.log(map);
      map.setZoom(zoomLevel);
    }
  }, [zoomLevel]);

//...
<MapContainer center={[37.0902, -95.7129]} zoom={zoomLevel} whenReady={setMap}>
  //...
</MapContainer>

map.setZoom is not a function

请问该如何解决？是否缺少leaflet的相关导入以获取setZoom方法？

解决方案 #

问题原因分析 #

1. mapRef为空的问题：MapContainer的ref指向的是React组件实例，不是Leaflet原生地图对象，直接调用setZoom会报错。
2. whenReady回调的参数：whenReady的回调参数是MapReadyEvent对象，不是地图实例，所以map.setZoom不存在，需要通过event.target获取原生地图对象。

正确实现方式 #

方式1：通过MapContainer的ref获取原生地图

MapContainer的ref对象有_leafletMap属性，指向Leaflet原生地图实例，修改useEffect代码：

useEffect(() => {
  if (mapRef.current?._leafletMap) {
    mapRef.current._leafletMap.setZoom(zoomLevel);
  }
}, [zoomLevel]);

方式2：正确使用whenReady回调

修改whenReady的处理逻辑，从事件对象中提取地图实例：

const [map, setMap] = useState(null);

const handleMapReady = (event) => {
  setMap(event.target); // event.target才是Leaflet原生地图对象
};

useEffect(() => {
  if (map) {
    map.setZoom(zoomLevel);
  }
}, [zoomLevel]);

// MapContainer部分
<MapContainer 
  center={[37.0902, -95.7129]} 
  zoom={zoomLevel} 
  whenReady={handleMapReady}
>
  <TileLayer
    attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
  />
</MapContainer>

方式3：更简洁的受控组件方式

React-Leaflet的MapContainer的zoom属性本身是受控的，只要zoomLevel更新，地图会自动重新渲染并更新缩放级别，不需要手动调用setZoom。直接去掉手动调用逻辑即可：

export const Map = () => {
  const zoomLevel = useSelector((state) => state.mapView.zoom);
  const dispatch = useDispatch();

  return (
    <div id="map-container" className="flex-container-row">
      <MapContainer center={[37.0902, -95.7129]} zoom={zoomLevel}>
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
      </MapContainer>
      <button onClick={() => dispatch(changeZoom(2))}>Change Zoom</button>
    </div>
  );
};

这种方式是React-Leaflet推荐的受控组件用法，Redux状态更新后，zoomLevel变化会触发MapContainer重新渲染，自动应用新的缩放级别。

补充说明 #

不需要额外导入Leaflet的方法，只要已安装leaflet依赖（react-leaflet依赖它），原生地图对象就会包含setZoom等方法。

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