@react-google-maps/api切换地图后Infobox组件报错求助

问题分析 #

切换地图/列表视图时，InsMap组件会被完全卸载并重新挂载。之前打开的InfoBox可能残留对旧地图实例的引用，或者组件状态未重置，导致重新渲染时尝试将InfoBox绑定到已销毁的地图对象，从而触发setMap参数无效的错误。

修复方案 #

1. 切换视图时重置地图相关状态 #

在InsPage的视图切换方法中，主动重置地图关联状态，确保组件重新挂载时处于初始状态：

// InsPage组件中修改btnHandler
const btnHandler = () => {
    setMapShow(!mapShow);
    // 切换视图时重置选中标记与信息框状态（需在useInsStore中补充对应方法）
    setSelectedMarker(null);
    setIsInfoBoxOpen(false);
};

2. InsMap组件卸载时清理InfoBox引用 #

添加卸载钩子，清理InfoBox与旧地图的关联，避免残留无效引用：

// InsMap组件中新增useEffect
useEffect(() => {
    return () => {
        // 组件卸载时关闭并解绑InfoBox
        if (infoBoxRef.current) {
            infoBoxRef.current.close();
            infoBoxRef.current.setMap(null);
        }
        // 重置本地状态
        setIsInfoBoxOpen(false);
        setSelectedMarker(null);
    };
}, []);

3. 优化onMarkerClick的依赖项 #

修正onMarkerClick的依赖数组，避免引用旧的地图实例：

const onMarkerClick = useCallback(
    (event) => {
        setSelectedMarker(event);
        setIsInfoBoxOpen(true);
        event && setCenter(event.position);
    },
    [] // 移除map依赖，此处未直接操作地图实例
);

4. 确保InfoBox仅在地图加载完成后渲染 #

修改InfoBox的渲染条件，增加地图实例存在的判断：

{isInfoBoxOpen && selectedMarker && map && selectedMarker?.options?.type !== 'target' && (
    <InfoBox
        options={{
            zIndex: 600,
            pixelOffset: new window.google.maps.Size(-100, 0)
        }}
        ref={infoBoxRef}
        onCloseClick={() => {
            setIsInfoBoxOpen(false);
            setSelectedMarker(null);
        }}
        position={selectedMarker.position}
        zIndex={700}
    >
        <InsInfoCard selectedMarker={selectedMarker}></InsInfoCard>
    </InfoBox>
)}

5. 优化mapRef的状态管理 #

修正onLoadMap的依赖项，避免不必要的重渲染：

const onLoadMap = useCallback(
    (mapFromLib: google.maps.Map<Element>) => {
        mapRef.current = mapFromLib;
        setMap(mapFromLib);
    },
    [] // 移除map依赖
);

核心原理 #

通过组件卸载时清理InfoBox与旧地图的关联、切换视图时重置状态，确保每次重新挂载地图组件时，所有状态和引用都处于初始状态，避免绑定到已销毁的地图实例。

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