更改主题后，反应谷歌地图不会更新样式（组件重新渲染）？

Question

我的网站中有一个自定义主题（浅色/深色），并且我也有一个自定义挂钩。我将谷歌地图（react-google-maps）自定义样式放在 a 中useMemo并将主题设置为依赖项，但是当我更改主题时，地图组件似乎没有重新渲染并应用新颜色。我尝试调试但没有运气。这是我的实现：

export const MapMarkerSelection = compose(
    withProps({
        googleMapURL: `https://maps.googleapis.com/maps/api/js?key=${API_KEY_MAP}&libraries=geometry,drawing,places`,
        loadingElement: <div style={{height: `100%`}} />,
        containerElement: (
            <div style={{height: `400px`, margin: `8px 0 20px`, borderRadius: `0.5rem`, overflow: 'hidden'}} />
        ),
        mapElement: <div style={{height: `100%`}} />,
    }),
    withScriptjs,
    withGoogleMap,
)((props) => {
    const mapRef = useRef();
    const theme = useTheme(); //here is mu custom hook (no issue with this it work fine in other components)

    useEffect(() => {
        setLatMarker(props.markerPosition.latitude);
        setLngMarker(props.markerPosition.longitude);
        mapRef.current.panTo({
            lat: props.markerPosition.latitude,
            lng: props.markerPosition.longitude,
        });
    }, [props.markerPosition, props.markerPosition.latitude, props.markerPosition.longitude]);

    const [latMarker, setLatMarker] = useState(props.markerPosition.latitude);
    const [lngMarker, setLngMarker] = useState(props.markerPosition.longitude);
    const setCallback = useCallback(
        (latLng) => {
            if (props.onSelectPosition) {
                props.onSelectPosition({latitude: latLng.lat(), longitude: latLng.lng()});
                setLatMarker(latLng.lat());
                setLngMarker(latLng.lng());
                mapRef.current.panTo({
                    lat: latLng.lat(),
                    lng: latLng.lng(),
                });
            }
        },
        [props],
    );

    const mapStyle = useMemo(() => {
        console.log('here');
        return [
            {
                featureType: 'water',
                elementType: 'geometry',
                stylers: [
                    {
                        color: theme.BACKGROUND_COLOR, //here I set water color to dark for dark theme and blue for lighr theme
                    },
                    {
                        lightness: 17,
                    },
                ],
            },
            {
                featureType: 'landscape',
                elementType: 'geometry',
                stylers: [
                    {
                        color: '#f5f5f5',
                    },
                    {
                        lightness: 20,
                    },
                ],
            },
            {
                featureType: 'road.highway',
                elementType: 'geometry.fill',
                stylers: [
                    {
                        color: '#ffffff',
                    },
                    {
                        lightness: 17,
                    },
                ],
            },
            {
                featureType: 'road.highway',
                elementType: 'geometry.stroke',
                stylers: [
                    {
                        color: '#ffffff',
                    },
                    {
                        lightness: 29,
                    },
                    {
                        weight: 0.2,
                    },
                ],
            },
            {
                featureType: 'road.arterial',
                elementType: 'geometry',
                stylers: [
                    {
                        color: '#ffffff',
                    },
                    {
                        lightness: 18,
                    },
                ],
            },
            {
                featureType: 'road.local',
                elementType: 'geometry',
                stylers: [
                    {
                        color: '#ffffff',
                    },
                    {
                        lightness: 16,
                    },
                ],
            },
            {
                featureType: 'poi',
                elementType: 'geometry',
                stylers: [
                    {
                        color: '#f5f5f5',
                    },
                    {
                        lightness: 21,
                    },
                ],
            },
            {
                featureType: 'poi.park',
                elementType: 'geometry',
                stylers: [
                    {
                        color: '#dedede',
                    },
                    {
                        lightness: 21,
                    },
                ],
            },
            {
                elementType: 'labels.text.stroke',
                stylers: [
                    {
                        visibility: 'on',
                    },
                    {
                        color: '#ffffff',
                    },
                    {
                        lightness: 16,
                    },
                ],
            },
            {
                elementType: 'labels.text.fill',
                stylers: [
                    {
                        saturation: 36,
                    },
                    {
                        color: '#333333',
                    },
                    {
                        lightness: 40,
                    },
                ],
            },
            {
                elementType: 'labels.icon',
                stylers: [
                    {
                        visibility: 'off',
                    },
                ],
            },
            {
                featureType: 'transit',
                elementType: 'geometry',
                stylers: [
                    {
                        color: '#f2f2f2',
                    },
                    {
                        lightness: 19,
                    },
                ],
            },
            {
                featureType: 'administrative',
                elementType: 'geometry.fill',
                stylers: [
                    {
                        color: '#fefefe',
                    },
                    {
                        lightness: 20,
                    },
                ],
            },
            {
                featureType: 'administrative',
                elementType: 'geometry.stroke',
                stylers: [
                    {
                        color: '#fefefe',
                    },
                    {
                        lightness: 17,
                    },
                    {
                        weight: 1.2,
                    },
                ],
            },
        ];
    }, [theme.BACKGROUND_COLOR]);

    return (
        <GoogleMap
            ref={mapRef}
            defaultOptions={{
                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>
    );
});

仅当我刷新页面时，地图的新主题才会应用。我该如何解决这个问题？

Answer 1

主题不断变化吗？如果没有，只需添加一个键GoogleMap，请记住，这将导致地图的完全重新渲染，如果用户可以移动地图，这可能不是您想要的。

另外，请检查库的文档，或者如果可能的话将其发布到此处，该道具可能defaultOptions由组件在内部缓存以防止重新渲染。另外，在使用备忘录时，请避免诸如prop={{memoizedValue}}因为您每次仍在创建新对象之类的事情，而应选择prop={memoizedValue}.

<GoogleMap
  ...
  key={theme.BACKGROUND_COLOR}
/>