Javascript 反应，设置已安装/未安装部件的状态警告

我有一个react组件，我正在使用它为我的应用程序逐步加载图像，这对我来说非常有用。但是，当我在页面上使用它加载图像时，我看到一个错误：

warning.js:35 warning:setState（…）：只能更新已安装或正在安装的组件。这通常意味着您在未安装的组件上调用了setState（）。这是禁止的

多次-对于调用的每个图像，看起来都是一次。由于图像组件仍在工作，因此它似乎没有造成任何严重影响。我想知道如何摆脱这个错误，但我不知道如何

这是我的组成部分：

import React, { PropTypes } from 'react';

require('./progressive-image.scss');

export default class ProgressiveImage extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      loaded: false,
      image: props.smallImg
    };

    this.loadImage = this.loadImage.bind(this);
    this.onLoad = this.onLoad.bind(this);
    this.onError = this.onError.bind(this);
    this.image = undefined;
  }

  componentDidMount() {
    const { largeImg } = this.props;
    this.loadImage(largeImg);
  }

  onError(err) {
    console.warn('Error loading progressive image :', err);
  }

  onLoad() {
    this.setState({
      loaded: true,
      image: this.image.src
    });
  }

  componentDidUpdate(nextProps) {
    const { largeImg, smallImg } = nextProps;

    if (largeImg !== this.props.largeImg) {
      this.setState({ loaded: false, image: smallImg }, () => {
        this.loadImage(largeImg);
      });
    }
  }


  loadImage(src) {
    if (this.image) {
      this.image.onload = null;
      this.image.onerror = null;
    }

    const image = new Image();
    this.image = image;
    image.onload = this.onLoad;
    image.onerror = this.onError;
    image.src = src;
  }

  render() {
    const imgStyle = { 'paddingBottom': this.props.heightRatio };
    const { imgAlt, imgTitle } = this.props;

    return (
      <div className={`progressive-placeholder ${this.state.loaded ? 'loaded' : ''}`}>
        {this.state.loaded &&
          <img
            alt={imgAlt}
            className={`loaded`}
            src={this.state.image}
            title={imgTitle}
             />
        }
        <img className={`img-small ${!this.state.loaded ? 'loaded' : ''}`} src={this.state.image} alt="placeholder image for loading"/>
        <div style={imgStyle} ></div>
      </div>
    );
  }
}

ProgressiveImage.displayName = 'ProgressiveImage';

ProgressiveImage.propTypes = {
  bgColor: PropTypes.string,
  heightRatio: PropTypes.string.isRequired,
  largeImg: PropTypes.string.isRequired,
  smallImg: PropTypes.string.isRequired,
  imgAlt: PropTypes.string,
  imgTitle: PropTypes.string,
};

import React，{PropTypes}来自'React'；
要求（'./progressive image.scss'）；
导出默认类ProgressiveImage扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
加载：false，
图片：props.smallImg
};
this.loadImage=this.loadImage.bind（this）；
this.onLoad=this.onLoad.bind（this）；
this.onError=this.onError.bind（this）；
this.image=未定义；
}
componentDidMount（）{
const{largeImg}=this.props；
此.loadImage（大图像）；
}
ONERR（错误）{
console.warn（'加载渐进映像时出错：'，错误）；
}
onLoad（）{
这是我的国家({
是的，
image:this.image.src
});
}
组件更新（下一步）{
const{largeImg，smallImg}=nextProps；
if（largeImg！==this.props.largeImg）{
this.setState（{loaded:false，image:smallImg}，（）=>{
此.loadImage（大图像）；
});
}
}
加载映像（src）{
如果（此图像）{
this.image.onload=null；
this.image.onerror=null；
}
常量图像=新图像（）；
这个图像=图像；
image.onload=this.onload；
image.onerror=this.onerror；
image.src=src；
}
render（）{
const imgStyle={'paddingBottom'：this.props.heightRatio}；
const{imgAlt，imgTitle}=this.props；
返回(
{this.state.loaded&&
}
);
}
}
ProgressiveImage.displayName='ProgressiveImage'；
ProgressiveImage.propTypes={
bgColor:PropTypes.string，
高度比：需要PropTypes.string.isRequired，
largeImg:PropTypes.string.isRequired，
smallImg:PropTypes.string.isRequired，
imgAlt:PropTypes.string，
imgTitle:PropTypes.string，
};

---

因此，调用setState的唯一时间是调用

onLoad

或

componentdiddupdate

时。我的想法是，因为它只调用了did mount和did update，所以不应该出现这个错误。我一直在寻找解决这个错误的方法，这让我感到困惑。如果需要任何其他信息，我很乐意提供。

问题在于您在

图像中的回调。可以在任意点调用onload

：

    image.onload = this.onLoad;

组件渲染时，可能会调用

此.onLoad

问题是，由于在加载外部图像资源时调用了

this.onLoad

，而在执行

this.setState

时调用了

this.onLoad，因此组件可能正在渲染，这将导致错误

要处理这个问题，我建议将
加载的
/
图像
值设置在本地
组件
状态之外，而不是
使用
redux
之类的方法将其分派到全局状态
 不能在didUpdate上改变状态，否则它将进入一个无休止的循环。这个
componentDidlUpdate
typo是如何进入其中的？@DimitarChristoff这就是问题的原因吗？我尝试将其替换为componentWillUpdate，但仍然看到错误。请注意，
道具类型
已被移动到它们自己的包中，并将在将来的版本中从
React
包中删除。我正在使用redux，我将尝试一下。谢谢我可以用你的线索解决这个问题，只要不允许
loadImage
在组件未安装的情况下启动。再次感谢。