ListGrid callbacks resulting in setState called on unmounted React component

[nitroamos]

I'm working on a React app which includes a ListGrid. Short summary: there's a button people click on, and when they do, a server is asked for data which is used in a ListGrid in a popup window. I'm adding a "close" button to the window, but when I click it, I see this warning:

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the TransformDrillDown component.

It looks like the order of events is:

1) Data is received so I call filterData on the ListGrid to do some filtering:

                lg.filterData(this.getValuesAsCriteria(), function (dsResponse, data, dsRequest) {
                    lg.markFilteredRecords();
                });

2) Close button is clicked

3) Component is unmounted, so I do this:

    componentWillUnmount() {
        console.log("componentWillUnmount:ListGrid");
        this.state.listGrid.destroy();
        this.state.filterForm.destroy();
        window.removeEventListener("resize", this.updateDimensions);
        this.setState({
            "listGrid": null,
            "filterForm": null
        });
        console.log("destroyed");
    }

4) The markFilteredRecords from the callback above is executed

5) markFilteredRecords ends up calling setState where I record which records were filtered in a (now unmounted) component's state.



Facebook says that using isMounted (and related) is an antipattern:
https://reactjs.org/blog/2015/12/16/...tipattern.html

and it seems like their recommendation in this context is to cancel the event (promise). Apparently, calling destroy on the ListGrid didn't cancel the events for me.

Now it looks like this:
https://stackoverflow.com/a/39767963/319034
works for me, but I wanted to write this up just to report on one aspect of mixing React and Smartclient.


I'm using v11.1p_2018-01-07.