在react-google-maps中，尝试在componentDidMount生命周期中使用fitbounds，但会收到“无法对已卸载的组件执行React状态更新。”错误

Question

我正在尝试按照教程进行界限，并在首次渲染地图时根据所有标记居中放置地图。它在地图页面上有效，但是当我使用后退按钮转到其他页面时出现此错误。 “ index.js：1446警告：无法在已卸载的组件上执行React状态更新。这是无操作，但表示您的应用程序内存泄漏。要修复，取消该组件中的所有订阅和异步任务，请执行以下操作：WillUnmount方法。” 我可以知道如何解决这个问题吗？非常感谢！

import React, { Component } from 'react';

import {
    withGoogleMap,
    GoogleMap,
    withScriptjs,
    Marker,
    InfoWindow
} from "react-google-maps";
import { compose, withProps, withStateHandlers, lifecycle } from "recompose";


import Constants from '../Constants';
import MapMarker from './MapMarker';


const CardTransactionMapRGMs = compose(
    withProps({
        googleMapURL:
            `https://maps.googleapis.com/maps/api/js?key=${Constants.GOOGLE_MAP_API_KEY}&libraries=geometry,drawing,places`,
        loadingElement: <div style={{ height: `100%` }} />,
        containerElement: <div style={{ height: "70vh", width: "100%" }} />,
        mapElement: <div style={{ height: "100%" }} />
    }),
    withStateHandlers(
        props => ({
            infoWindows: props.geo.map(p => {
                return { isOpen: false };
            })
        }),
        {
            onToggleOpen: ({ infoWindows }) => selectedIndex => ({
                infoWindows: infoWindows.map((iw, i) => {
                    iw.isOpen = selectedIndex === i;
                    return iw;
                })
            })
        }
    ),

    lifecycle({
        componentDidMount() {

            this.setState({

                zoomToMarkers: map => {
                    //console.log("Zoom to markers");
                    const bounds = new window.google.maps.LatLngBounds();
                    map.props.children.forEach((child) => {
                        if (child.type === Marker) {
                            bounds.extend(new window.google.maps.LatLng(child.props.position.lat, child.props.position.lng));
                        }
                    })
                    map.fitBounds(bounds);
                }
            })
        },


    }),


    withScriptjs,
    withGoogleMap
)(props => (
    <GoogleMap ref={props.zoomToMarkers} defaultZoom={props.zoom} defaultCenter={props.center}>
        {
            props.geo &&
            props.geo.map((geo, i) => {

                return (
                    <Marker
                        id={geo.id}
                        key={geo.id}
                        position={{ lat: geo.lat, lng: geo.lng }}
                        title="Click to zoom"
                        onClick={props.onToggleOpen.bind(this, i)}
                    >
                        {props.infoWindows[i].isOpen && (
                            <InfoWindow onCloseClick={props.onToggleOpen.bind(i)}>
                                <div>{geo.amount} </div>
                            </InfoWindow>
                        )}
                    </Marker>
                );
            })
        }
    </GoogleMap >
));



export default CardTransactionMapRGMs;