In react-google-maps Try to use fitbounds in componentDidMount lifecycle but get “Can't perform a React state update on an unmounted component.”error

问题

I'm trying to follow tutorials make bounds and center the map based on all the marks when the map is first rendered. It works on the map page, however I got this error when I use back button to go to other pages. "index.js:1446 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method." May I know how to solve this? Thank you so much!

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;

来源：https://stackoverflow.com/questions/57527858/in-react-google-maps-try-to-use-fitbounds-in-componentdidmount-lifecycle-but-get

标签

reactjs

react-google-maps