javascript - 卸载组件时取消图像加载

Question

我有一个 React 应用程序，我在其中使用另一个名为 load-image 的组件加载图像。

现在我将 src 传递给 load-image，它显示一个很好的加载器直到图像加载，并且当它加载时，它显示一个漂亮的图像动画。

问题就出现在这里。我打开应用程序页面，所有图像开始加载。现在用户转到另一个页面，图像仍在加载。我可以看到它们在控制台中加载。现在我在控制台中收到此错误。

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 undefined component.

这是我的代码。

export default class LoadImage extends React.Component {

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

  componentDidMount() {
    const imgSrc = this.props.imageSrc;
    const img = new window.Image();
    img.onload = this.onImageLoad;
    img.src = imgSrc;
    this.setState({
      isMounted: true,
    });
  }
  componentWillUnmount() {
    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>
    );
  }
}

我如何取消旧的请求，以便它们在卸载后不更新状态。我已经在使用状态来检查组件是否已安装。谢谢。

Answer 1

您可以在图像仍在加载时更改回调。在 componentWillUnmount 中，将 this.img.onload 设置为不执行任何操作的函数。

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

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

来源: https://github.com/Automattic/wp-calypso/blob/master/client/components/image-preloader/index.jsx

如果采用这种方法，则不需要 isMounted()。