加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

reactjs – React – 在componentDidMount中的setState

发布时间:2020-12-15 20:12:50 所属栏目:百科 来源:网络整理
导读:我正在为图像构建一个延迟加载组件.但我设置状态有问题.我得到的只能更新已安装或安装的组件错误,但我在componentDidMount中使用setState,这应该允许我避免这样的错误. 这是我的代码: export default class Images extends React.Component { constructor(p
我正在为图像构建一个延迟加载组件.但我设置状态有问题.我得到的只能更新已安装或安装的组件错误,但我在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.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读