Javascript 反应：在方向更改后触发重新渲染和重新计算偏移网络宽度 问题:

我有一个react photo应用程序，移动视图在方向更改时出错

如果用户从纵向>>切换到横向>>再返回纵向视图，则图像将被切断。在重新加载之前，它将正确显示

这是因为图像大小是使用具有以下计算的比例计算的：

    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])

问题在于偏移网络宽度。只有在重新加载或调整垂直比例和水平比例后，才能调整纵向视图的正确值

我的做法： 我可以触发一个

window.location.reload（）

，它在侦听

orientationchange

的自定义挂钩之后触发。这个很好用。但我不想重新加载完整的应用程序，因为在这种情况下，非永久性数据将丢失

我认为我缺少一个触发器，该触发器会重新渲染组件并相应地更新比例/偏移网络宽度/偏移网络宽度