Javascript react获取div clientWidth在组件didUpdate中返回null

我有一个包含图像的react组件。我需要的图像尺寸（而不是窗口尺寸）的一些其他代码，我与图像元素。当我简单地呈现组件时，一切都正常，但当我刷新网页时，this.imgEl.clientWidth将是未定义的。有人有解决方案吗

准确地说，在下面的代码块中，当我刷新页面时，页面维度未定义，因此大小将保持为0，componentdidupdate将无限运行

我的组件代码如下所示：

class myComp extends React.Component {
    constructor(props) {
        super(props);
        this.handleSizeChange = this.handleSizeChange.bind(this);
    }
 state = {
        size: {x: 0, y: 0}
}

 componentDidMount() {
        window.addEventListener("resize", this.handleSizeChange)
//then fetch data and a state change
}

 componentDidUpdate(prevProps, prevState, snapshot) {
        if (this.state.size.x === 0 || this.state.size.y === 0) {
            this.handleSizeChange()
        }
    }

 componentWillUnmount() {
        window.removeEventListener('resize', this.handleSizeChange);
    }

handleSizeChange() {
     
        this.setState({size: {x: this.imgEl.clientWidth, y: this.imgEl.clientHeight}});
    }



    render() {
        return (
                <Box m={1} style={{zIndex: 1,minHeight:"97vh"}}>
                            <img ref={(imgEl) => {
                                this.imgEl = imgEl
                            }} src={im} onClick={this.onClick}
                                 style={{maxHeight: "97vh", maxWidth: "90vw"}}/>
                </Box>
)}
}

类myComp扩展了React.Component{
建造师（道具）{
超级（道具）；
this.handleSizeChange=this.handleSizeChange.bind（this）；
}
状态={
大小：{x:0，y:0}
}
componentDidMount（）{
window.addEventListener（“resize”，this.handleSizeChange）
//然后获取数据并更改状态
}
componentDidUpdate（prevProps、prevState、快照）{
if（this.state.size.x==0 | | this.state.size.y==0）{
这个.handleSizeChange（）
}
}
组件将卸载（）{
window.removeEventListener（'resize'，this.handleSizeChange）；
}
handleSizeChange（）{
this.setState（{size:{x:this.imgEl.clientWidth，y:this.imgEl.clientHeight}）；
}
render（）{
返回(
)}
}

这是因为图像尚未加载。您可以在图像上侦听

load

事件-在图像完全加载后，即访问其维度时

const imgEl = new Image();
imgEl.addEventListener("load", ()=>{
  // this.imgEl.clientWidth should now return correct width
})
imgEl.src = someImage;