Get an lifecycle unmounted error when using fitbounds()

[Yingli40604345]

Getting Help

Hello guys! 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." 

I tried on componentWillUnmount() methods to reset the state but does not work. May I know how to solve this? Thank you so much! Here's my code:

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;

[JustFly1984]

@Yingli40604345 this library is unmaintained, please look at npm @react-google-maps/api

[Yingli40604345]

@Yingli40604345 this library is unmaintained, please look at npm @react-google-maps/api

Thank you so much!

[yuritoledo]

@JustFly1984 your lib has the same API as this one?

I mean, can I just switch te import and use same Components / methods, etc?

Thank you