Get a lifecycle componentDidMount unmounted error

[Yingli40604345]

Hello guys! I'm trying to use life cycle method to with google map library. 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;

[6axter82]

Hi @Yingli40604345 ,
Did you manage to solve the problem? If yes, could you please write the solution or give a hint?

Thank you!