React - componentDidMount中的setState

Question

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

这是我的代码:

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,但我不知道如何实现这一点.我该怎么办？

Answer 1

如果您尝试在未安装的组件上设置状态，您\xe2\x80\x99将收到类似的错误。有两种解决方案：

\n\n

\n

1. 确保组件 isMounted ：使用setstate();在检查组件是否已安装后使用。

\n

2. 中止请求：当组件卸载时，我们可以丢弃该请求，这样回调就不会被调用。为此，我们\xe2\x80\x99将利用另一个React生命周期钩子，componentWillUnmount .

\n

\n