React-leaflet：尽管 onViewportChanged 处理程序，地图仍将缩放值刷新为默认值

如何解决React-leaflet：尽管 onViewportChanged 处理程序，地图仍将缩放值刷新为默认值

我有一个 Map 组件，它在本地存储中为地图存储一些状态。

话虽如此，我正在设置 zoom 属性的初始状态，然后在地图上使用 onViewportChanged 属性，让处理程序侦听对 zoom 属性所做的更改{1}} 属性，然后将处理程序中的值设置为缩放属性。

UserContext 组件：

import React,{ useState,useEffect,useContext,useReducer } from 'react';

var initialState = {
  currentMapProps: { zoom: 18 }
};

var UserStateContext = React.createContext();
var UserContextDispatch = React.createContext();

function UserProvider({ children }) {
  function userReducer(state,{ type,payload }) {

    switch (type) {

      case 'setMapZoom': {
        return {
          ...state,...{ currentMapProps: payload.currentMapProps.zoom }
        };
      }

      default: {
        throw new Error(`Unhandled action type: ${type}`);
      }
    }
  }

  const [user,setUser] = useState(() => getLocalStorage('user',initialState));

  var [state,dispatch] = useReducer(userReducer,user);

  useEffect(() => {
    setLocalStorage('user',state);
  },[state]);

  return (
    <UserStateContext.Provider value={{ state: state }}>
      <UserContextDispatch.Provider value={{ dispatch: dispatch }}>
        {children}
      </UserContextDispatch.Provider>
    </UserStateContext.Provider>
  );
}

function userState() {
  const context = useContext(UserStateContext);
  if (context === undefined) {
    throw new Error('userState must be used within a UserProvider');
  }
  return context;
}

function userDispatch() {
  const context = useContext(UserContextDispatch);
  if (context === undefined) {
    throw new Error('userDispatch must be used within a UserProvider');
  }
  return context;
}


export default UserContextDispatch;

export { UserProvider,userState,userDispatch };

然后在我的地图组件中：

import { userState,userDispatch } from '../Context/UserContext.jsx';

export default function MyMap({}) {
  var [animate,setAnimate] = useState(false);
  var [userLocation,setUserLocation] = useState(null);

  var mapRef = useRef();
  var mapRefForRoutingMachine = useRef();
  

更新：这是来自上下文的引用开始的地方。 state 对象在此处被解构，因此我可以解构 UserContext 属性。 dispatch 相同，只是它是一个函数

  var { state } = userState();
  var { dispatch } = userDispatch();
  var {
    currentMap,currentMapProps,} = state;

  function handleOnViewportChanged(viewport) {
    var { current = {} } = mapRef;
    var { leafletElement: map } = current;
    if (map != undefined && currentMapProps != undefined) {
      var { zoom } = viewport;

      dispatch({
        type: 'setMapZoom',payload: {
          currentMapProps: {
            zoom
          }
        }
      });
    }
  }

  return (
    <Map
      onViewportChanged={handleOnViewportChanged}
      preferCanvas={true}
      zoom={() => {
        if (currentMapProps != undefined) {
          var { zoom } = currentMapProps;
          return zoom;
        } else {
          return null;
        }
      }}
      ref={mapRef}
      onClick={e => handleWaypointsOnMap(e)}
    >
 
    </Map>
  );
}

那么有什么我不知道的事情会导致地图在忽略我的处理程序时刷新？

提前致谢！