反应：更改方向后触发重新渲染和offsetWidth的重新计算

Question

问题：

我有一个反应照片应用，方向改变时移动视图错误。

如果用户从人像>>转到风景>>并返回人像视图，则图像被剪切掉。直到重新加载，然后才能正确显示。

这是因为图像尺寸是通过具有以下计算的比例尺来计算的：

    const [scale, setScale] = useState(1)
    const wrapperRef = useRef(null)
    const box = useElementSize(wrapperRef)
    const orientationChange = useDeviceLandscapeOrientation()

    useLayoutEffect(() => {

        const wrapperNode = wrapperRef.current

        const verticalScale = wrapperNode.offsetWidth / width
        const horizontalScale = wrapperNode.offsetHeight / height
        const scale = Math.min(verticalScale, horizontalScale)

        setScale(scale)

    }, [box, width, height, orientationChange])

问题是offsetWidth。仅在重新加载verticalScale和horizontalScale或调整其大小后，才能调整为纵向视图的正确值。

我的方法：

我可以触发一个window.location.reload()，该监听器会在侦听orientationchange的自定义钩子之后触发。这样很好。但是我不想重新加载整个应用程序，因为在这种情况下，永久数据将丢失。

我相信我缺少一个重新渲染组件并相应地更新scale / offsetWidth / offsetHeight的触发器。