无法在已卸载的组件上调用setState（或forceUpdate）。 react-image-gallery上的内存泄漏

Question

I've been trying to implement the react-image-gallery v0.8.7 (0.8.8 has a bug ) from this npm package: https://github.com/xiaolin/react-image-gallery and integrated following the example as follows (I am developing a Meteor web app):

class MyGallery extends Component {
    constructor(props) {
    super(props);
    this.state = {
      mediaSrc: [],
      isFullScreen: false
    };
  }

  componentWillMount() {
    const mediaSrc = this.props.myObject.pictures.map((picture) => {
      return { original: picture, thumbnail: picture };
    });
    this.setState({ mediaSrc });
  }

  _onImageClick(event) {
    if (this.state.isFullScreen) {
      this._imageGallery.exitFullScreen();
      this.setState({ isFullScreen: false });
    } else {
      this._imageGallery.fullScreen();
      this.setState({ isFullScreen: true });
    }
  }

  render() {
    return (
      <div className="dish row">
        <figure className="center col-12" >
          <div className="dish__preview_container">
            <ImageGallery
              ref={i => this._imageGallery = i}
              items={this.state.mediaSrc}
              onClick={this._onImageClick.bind(this)}
              showFullscreenButton={false}
              showIndex
              showPlayButton={false}
              showThumbnails={false}
            />
         </div>
      );
  }
}

MyGallery.propTypes = {
  myObject: PropTypes.object.isRequired,
}

}

The object myObject contains the following value in the pictures array:

[ 'https://media-cdn.tripadvisor.com/media/photo-s/05/6c/2b/9b/america-s-taco-shop.jpg',
  'https://www.cocinavital.mx/wp-content/uploads/2017/09/tostadas-de-tinga-de-pechuga-de-pollo-con-chipotle-video.jpg'
]

When rendering the ImageGallery is shown as expected, however when clicking on either the button aria-label="Previous Slide" or aria-label="Next Slide", doesn't show the respective image and throws the following exception on the developer tools console:

Warning: Can't call setState (or forceUpdate) 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.
    in ImageGallery (created by MyGallery)
    in div (created by MyGallery)

Any suggestions for a solution, please?

Update: Had a reset of component state variables on the componenteWillUmnount method. Removed it, also tried with Meteor Reactive Dic t instead of component state variables. The exception remains, though.

Answer 1

According to React Official Documentation , you should not call setState() in componentWillUnmount method because your component will never be re-rendered. To date, I only use this method to remove event listeners added in componentDidMount() .