React中justifiedRowDetailsHeight状态更新滞后，切换图片高度异常

项目背景 #

基于justified-layout和react-virtualized开发的图片预览项目，核心尺寸控制逻辑如下：

• previewImageContainerRef（useCallback定义）挂载在<PreviewImage>组件的.c-flex-center.picture-frame-wrapper容器上，用于获取容器宽高并计算预览图高度，对应的状态previewImageWidth/previewImageHeight及更新方法定义在父组件<Results>中。
• justifiedRowDetailsRef用于获取预览图父级容器的尺寸，对应的状态justifiedRowDetailsWidth/justifiedRowDetailsHeight用于父级容器的高度计算，初始为useCallback定义在<Results>组件中，挂载在<PreviewImgRow>的父级容器上。

问题历程 #

1. 最初问题：justifiedRowDetailsHeight仅在第二次及之后点击<JustifiedBox>中的图片展开时才正确更新。
2. 修改后问题：将justifiedRowDetailsRef替换为useRef(null)，并通过依赖previewImageHeight和isPreviewShown的useEffect更新尺寸后，首次点击高度正确，但切换不同尺寸图片时，预览图高度始终滞后一步。

解决方案 #

核心问题是DOM尺寸更新与React状态更新时机不匹配，加上依赖项不全导致无法及时响应变化，以下是具体修复步骤：

1. 修复previewImageContainerRef的依赖项 #

原useCallback依赖为空数组，会导致无法获取最新的默认图片宽高及状态更新方法，补充依赖后确保每次计算都用最新值：

const previewImageContainerRef = useCallback(node => {
    if (node !== null) {
        const rect = node.getBoundingClientRect();
        props.setPreviewImageWidth(rect.width);
        // 基于容器宽度和默认图片比例计算预览图高度
        const new_height = (rect.width / defaultImageWidthRef.current ) * defaultImageHeightRef.current;
        props.setPreviewImageHeight(new_height);
    }
}, [props.setPreviewImageWidth, props.setPreviewImageHeight]);

2. 优化justifiedRowDetailsRef的更新逻辑 #

补充依赖项并使用requestAnimationFrame确保DOM渲染完成后再获取尺寸，保证每次状态变化都能触发正确计算：

// 在<Results>组件中
useEffect(() => {
    if (justifiedRowDetailsRef.current && isPreviewShown) {
        // 等待DOM渲染完成后再计算尺寸
        const updateSize = () => {
            const rect = justifiedRowDetailsRef.current.getBoundingClientRect();
            setJustifiedRowDetailsWidth(rect.width);
            setJustifiedRowDetailsHeight(rect.height);
        };
        const frameId = requestAnimationFrame(updateSize);
        // 清理函数避免内存泄漏
        return () => cancelAnimationFrame(frameId);
    }
}, [isPreviewShown, previewImageHeight, currentSelectedImage]); // 新增当前选中图片为依赖

3. 监听图片加载完成事件 #

图片加载完成后才会最终确定容器尺寸，在<PreviewImage>的img标签上添加onLoad事件，主动触发父级尺寸更新：

// preview_image.js
const PreviewImage = ({ triggerSizeUpdate, ...props }) => {
    const handleImageLoad = () => {
        // 通知父组件重新计算容器尺寸
        triggerSizeUpdate();
    };

    return (
        <div className="c-flex-center picture-frame-wrapper" ref={previewImageContainerRef}>
            <img 
                src={props.imageUrl} 
                alt="preview" 
                onLoad={handleImageLoad}
            />
        </div>
    );
};

在<Results>组件中定义触发方法并向下传递：

const triggerSizeUpdate = useCallback(() => {
    if (justifiedRowDetailsRef.current) {
        const rect = justifiedRowDetailsRef.current.getBoundingClientRect();
        setJustifiedRowDetailsWidth(rect.width);
        setJustifiedRowDetailsHeight(rect.height);
    }
}, []);

关键原因说明 #

• 初始useCallback仅在组件挂载时执行一次，首次点击时DOM尚未更新，无法获取正确尺寸。
• 修改后的useEffect依赖不全，未监听选中图片的变化，导致切换图片时无法触发重新计算。
• 图片加载存在异步过程，容器尺寸会在图片加载完成后才最终确定，需通过onLoad事件补充更新。

内容的提问来源于stack exchange，提问作者yeln