Ad

React ComponentDidMount() Is Fired On UnMounted Component

- 1 answer

A simple react component that invokes a promise from the data store on componentDidMount is throwing a 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 LocationNameView component.

I threw a few debug console.log to see if this.isMounted() is true/false, and inside componentDidMountthis.isMounted() will return false the first time then again and it will be true. I'm not sure if the docs are clear or the name of componentDidMount is skewing my reasoning here but it seems like this method should only be invoked if the component is actually mounted.

enter link description here

componentDidMount: function() {

  var self = this;
  // make the request to the backend and replace the loading location text
  Models.Location.find(this.props.location)
    .then(function(location) {

        console.log(self.isMounted()); // <--- shows false then true 

        self.setState({ location : location });

    });

},
Ad

Answer

componentDidMount is invoked when the underlying DOM representation is built, but, not yet mounted to the actual DOM.

The reason the warning is being displayed about setting state on an unMounted component is because the aSync callback in the above example can return before the component is actually mounted to the DOM tree in the client/browser.

The lesson here is if you're using an aSync callback that sets state in your component on componentWillMount or componentDidMount, first use the safety catch isMounted() before proceeding to setting state, ie:

componentDidMount() {

  let self = this;

  PromiseMethod().then(function aSyncCallback(data) {

    if ( self.isMounted() ) {

      self.setState({...data});

    }

  });

}

React Component Lifecycle reference

Ad
source: stackoverflow.com
Ad