React中react-google-maps切换主题后地图样式不更新、未重渲染怎么办

问题根因 #

你代码中使用的defaultOptions属于初始化属性，仅在GoogleMap组件首次挂载时生效，后续mapStyle随主题更新后，组件不会响应这个属性的变化，因此无法应用新的地图样式。你的useMemo依赖配置是正确的，切换主题时已经生成了新的样式数组，只是没有同步到地图实例上。

解决方法 #

按以下步骤修改即可：

1. 将GoogleMap组件的defaultOptions属性替换为options，该属性支持响应式更新
2. （可选兼容旧版本）增加useEffect监听mapStyle变化，手动同步样式到地图实例，避免部分版本的react-google-maps不识别options更新的问题

修改后的核心代码 #

1. 替换组件属性 #

return (
    <GoogleMap
        ref={mapRef}
        {/* 把defaultOptions改成options */}
        options={{
            styles: mapStyle,
        }}
        defaultZoom={12}
        defaultCenter={{lat: latMarker, lng: lngMarker}}
        onClick={({latLng}) => setCallback(latLng)}
    >
        <Marker position={{lat: latMarker, lng: lngMarker}} draggable onDragEnd={({latLng}) => setCallback(latLng)} />
    </GoogleMap>
);

2. 新增手动同步的useEffect（如果替换属性后不生效再加） #

// 放在现有useEffect下面即可
useEffect(() => {
    if (!mapRef.current) return;
    mapRef.current.setOptions({ styles: mapStyle });
}, [mapStyle]);

额外注意 #

如果后续你要修改更多地图样式随主题切换，记得把对应的theme属性加到mapStyle的useMemo依赖数组中，或者直接把整个theme作为依赖项，避免样式更新不完整。

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