reactjs – React – 在componentDidMount中的setState

我正在为图像构建一个延迟加载组件.但我设置状态有问题.我得到的只能更新已安装或安装的组件错误,但我在componentDidMount中使用setState,这应该允许我避免这样的错误.

这是我的代码：

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

        this.element = null;

        this.state = {
            loaded: false,height: 0
        };
    }

    componentDidMount() {
        this.element = findDOMNode(this);

        this.loadImage();
    }

    getDimensions() {
        const w = this.element.offsetWidth;

        let initw = 0;
        let inith = 0;

        let result;

        const img = new Image();
        img.src = this.props.url;

        img.onload = (e) => {
            initw = e.path[0].width;
            inith = e.path[0].height;

            result = (w / initw) * inith;

            setTimeout(() => {
                this.setState({
                    loaded: true,height: `${result}px`
                });
            });
        }
    }

    loadImage() {
        _scrolling.add([this.element],() => {
            if (this.element.classList.contains(_scrolling.classes.coming)) { // the image is visible
                this.getDimensions();
            }
        });
    }

    render() {
        const classes = this.state.loaded ? `${this.props.parentClass}__image--loaded` : null;
        const styles = this.state.loaded ? {
            maxHeight: this.state.height,minHeight: this.state.height,overflow: 'hidden'
        } : null;

        return (
            <div className={`${this.props.parentClass}__image ${classes}`} style={styles}>
                {this.state.loaded ?
                    <img
                        className={`${this.props.parentClass}__img`}
                        src={this.props.url}
                        title={this.props.title}
                        alt={this.props.title}
                    />
                    : null
                }
            </div>
        )
    }

我相信问题在于img.onload,但我不知道如何实现这一点.我该怎么办？

解决方法

如果您尝试在未安装的组件上设置状态,则会出现类似的错误.有两种解决方案：

> Assure Component isMounted：使用setstate();检查组件是否已安装后.>中止请求：当组件卸载时,我们可以抛弃请求,以便永远不会调用回调.为此,我们将利用另一个React生命周期钩子componentwillUnmount.