javascript - Cancel Image onload when component unmounts - Stack Overflow

admin管理员组

文章数量:1289425

I have a react app where I load images using another ponent called load-image.

Now I pass src to load-image, it shows a nice loader till image loads, and when its loaded, it shows a nice animation of image.

The problem arises here. I opened the app page, All images start loading. Now user goes to another page, the images are still loading. I can see them loading in the console. Now I get this error in console.

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

Here is my code.

export default class LoadImage extends React.Component {

  constructor() {
    super();
    this.state = {
      isLoaded: false,
      isMounted: false,
    };
    this.onImageLoad = this.onImageLoad.bind(this);
  }

  ponentDidMount() {
    const imgSrc = this.props.imageSrc;
    const img = new window.Image();
    img.onload = this.onImageLoad;
    img.src = imgSrc;
    this.setState({
      isMounted: true,
    });
  }
  ponentWillUnmount() {
    this.setState({
      isMounted: false,
    });
  }

  onImageLoad() {
    const self = this;
    if (self.state.isMounted === true) {
      self.setState({
        isLoaded: true,
      });
    }
  }
  render() {
    const self = this;
    const imageClasses = classNames({
      'image-loaded': self.state.isLoaded,
      'image': true,
    });
    const imgStyle = {
      backgroundImage: 'url("' + self.props.imageSrc + '")',
      backgroundSize: 'cover',
      backgroundPosition: 'center',
      backgroundRepeat: 'no-repeat',
      width: 'inherit',
      height: 'inherit',
    };
    return (
      <div className="image-loader">
        <div style={ imgStyle } className={ imageClasses }>
        </div>
      </div>
    );
  }
}

How can i cancel older request so that they don't update state after unmounting. I am already using state to check if ponent is mounted or not. Thanks.

I have a react app where I load images using another ponent called load-image.

Now I pass src to load-image, it shows a nice loader till image loads, and when its loaded, it shows a nice animation of image.

The problem arises here. I opened the app page, All images start loading. Now user goes to another page, the images are still loading. I can see them loading in the console. Now I get this error in console.

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

Here is my code.

export default class LoadImage extends React.Component {

  constructor() {
    super();
    this.state = {
      isLoaded: false,
      isMounted: false,
    };
    this.onImageLoad = this.onImageLoad.bind(this);
  }

  ponentDidMount() {
    const imgSrc = this.props.imageSrc;
    const img = new window.Image();
    img.onload = this.onImageLoad;
    img.src = imgSrc;
    this.setState({
      isMounted: true,
    });
  }
  ponentWillUnmount() {
    this.setState({
      isMounted: false,
    });
  }

  onImageLoad() {
    const self = this;
    if (self.state.isMounted === true) {
      self.setState({
        isLoaded: true,
      });
    }
  }
  render() {
    const self = this;
    const imageClasses = classNames({
      'image-loaded': self.state.isLoaded,
      'image': true,
    });
    const imgStyle = {
      backgroundImage: 'url("' + self.props.imageSrc + '")',
      backgroundSize: 'cover',
      backgroundPosition: 'center',
      backgroundRepeat: 'no-repeat',
      width: 'inherit',
      height: 'inherit',
    };
    return (
      <div className="image-loader">
        <div style={ imgStyle } className={ imageClasses }>
        </div>
      </div>
    );
  }
}

How can i cancel older request so that they don't update state after unmounting. I am already using state to check if ponent is mounted or not. Thanks.

• javascript
• reactjs

Share Improve this question Follow edited Jan 6, 2016 at 1:50 Felix Kling 817k181181 gold badges1.1k1.1k silver badges1.2k1.2k bronze badges asked Dec 9, 2015 at 18:42 Ateev ChopraAteev Chopra 1,02633 gold badges1616 silver badges3232 bronze badges 2

• goo.gl/L0CHIX – Oleksandr T. Commented Dec 9, 2015 at 18:44
• How do i check if ponent is mounted or not ? I'm Following this: jaketrent./post/set-state-in-callbacks-in-react – Ateev Chopra Commented Dec 9, 2015 at 18:45

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 10

You can change the callback while the image is still loading. In ponentWillUnmount, set this.img.onload to a function that does nothing.

  ponentDidMount() {
    const imgSrc = this.props.imageSrc;
    this.img = new window.Image();
    this.img.src = imgSrc;
    this.img.onload = this.onImageLoad;

  }
  ponentWillUnmount() {
    if ( ! this.img ) {
        return;
    }
    this.img.onload = function(){};
    delete this.img;
  }

Source: https://github./Automattic/wp-calypso/blob/master/client/ponents/image-preloader/index.jsx

No need for isMounted() if you take this approach.

Don't call setState in ponentWillUnmount. If the ponent is about to unmount, there's no point altering its state since it's about to be removed from the DOM.

本文标签： javascriptCancel Image onload when component unmountsStack Overflow