gpt4 book ai didi

javascript - React,已安装/未安装组件的 setState 警告

转载 作者:行者123 更新时间:2023-12-03 03:37:13 25 4
gpt4 key购买 nike

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

warning.js:35 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.

多次 - 看起来就像调用每个图像一次。它似乎没有严重影响任何事情,因为图像组件仍然有效。我想知道如何消除这个错误,但我不知道如何消除。

这是我的组件:

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,
};

因此,只有在调用 onLoadcomponentDidUpdate 时才调用 setState。我的想法是,因为它只调用了 did mount 和 did update,所以不应该出现此错误。寻找有关如何清除此错误的任何见解,因为它让我感到困惑。如果需要任何其他信息,我很乐意提供。

最佳答案

问题是您在 image.onload 中的回调可以在任何随机点调用:

    image.onload = this.onLoad;

有可能在组件渲染时调用 this.onLoad

问题是,因为 this.onLoad 在外部图像资源加载时被调用,然后当您执行 this.setState 时,您的组件可能会呈现并且 这会导致错误

为了解决这个问题,我建议在本地 Component 状态之外设置 loaded/image 值,而不是 dispatch 使用诸如 redux 之类的东西将其设置为全局状态。

关于javascript - React,已安装/未安装组件的 setState 警告,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45800517/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com