高度状态值不会立即更新并且状态值总是落后一步

Question

我有一个小项目，使用justified-layout和react-virtualized，

\n

我将width和height与Ref 一起preview images设置。( 在组件 [( ) ] 中，)useCallbackpreviewImageContainerRef<PreviewImage><Results> / <PreviewImgRow> / <PreviewImage>components > albums > results > preview_image.jsref={previewImageContainerRef} is in preview_image.js as well, located on <div> with className="c-flex-center picture-frame-wrapper"

\n

\xc2\xa0 \xc2\xa0 // useCallback > Ref : previewImageContainerRef\n\xc2\xa0 \xc2\xa0 const previewImageContainerRef = useCallback(node => {\n\n\xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0 if (node !== null) {\n\n\xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0 // Set > Preview Image Width\n\xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0 props.setPreviewImageWidth(node.getBoundingClientRect().width);\n\n\xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0 // Calculate > Preview Image Height\n\xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0 let new_height = (node.getBoundingClientRect().width / defaultImageWidthRef.current ) * defaultImageHeightRef.current;\n\n\xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0 // Set > Preview Image Height\n\xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0 props.setPreviewImageHeight(new_height);\n\n\xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0 }\n\n\xc2\xa0 \xc2\xa0 }, []);\n

\n

foruseState和setPreviewImageWidth,setPreviewImageHeight在父组件中定义（<Results>[components > albums > results > Results.js ])

\n

\xc2\xa0 // Preview Image > Width & Height\n\xc2\xa0 const [previewImageWidth, setPreviewImageWidth] = useState(0);\n\xc2\xa0 const [previewImageHeight, setPreviewImageHeight] = useState(0);\n

\n

justifiedRowDetailsRef是在<Results>组件中定义的，它useCallback也使用它，并且它是<div>围绕preview image(ref={justifiedRowDetailsRef}位于组件 [( <Results> / <PreviewImgRow>) components > albums > results > PreviewImgRow.js]) 中的父级之一：

\n

\xc2\xa0 // useCallback > Ref : justifiedRowDetailsRef\n\xc2\xa0 const justifiedRowDetailsRef = useCallback((node) => {\n\xc2\xa0 \xc2\xa0 if (node !== null) {\n\n\xc2\xa0 \xc2\xa0 \xc2\xa0 setJustifiedRowDetailsWidth(node.getBoundingClientRect().width);\n\xc2\xa0 \xc2\xa0 \xc2\xa0 setJustifiedRowDetailsHeight(node.getBoundingClientRect().height);\n\n\xc2\xa0 \xc2\xa0 }\n\xc2\xa0 }, []);\n

\n

foruseState和在justifiedRowDetailsWidth组件justifiedRowDetailsHeight中定义<Result>：

\n

\xc2\xa0 const [justifiedRowDetailsWidth, setJustifiedRowDetailsWidth] = useState(0);\n\xc2\xa0 const [justifiedRowDetailsHeight, setJustifiedRowDetailsHeight] = useState(0);\n

\n

justifiedRowDetailsHeight用于<div>包裹多个父级的高度计算preview image

\n

我面临的问题是，justifiedRowDetailsHeight只有当单击组件image中的展开后，该值才会正确更新<JustifiedBox>second time

\n

问题预览：

\n

\n

这是我的codesandbox链接：\n https://codesandbox.io/s/gifted-ride-qvquwv?file=/components/albums/results/Results.js

\n

非常感谢对此的任何帮助

\n

编辑：我已经注释掉了：

\n

  // useCallback > Ref : justifiedRowDetailsRef\n  const justifiedRowDetailsRef = useCallback((node) => {\n    if (node !== null) {\n\n      setJustifiedRowDetailsWidth(node.getBoundingClientRect().width);\n      setJustifiedRowDetailsHeight(node.getBoundingClientRect().height);\n\n    }\n  }, []);\n

\n

并将其替换为：

\n

const justifiedRowDetailsRef = useRef(null);\n

\n

并将setJustifiedRowDetailsWidth和传递setJustifiedRowDetailsHeight给<PreviewImgRow>组件，并将其添加useEffect()到其中：

\n

  useEffect(() => {\n    if (justifiedRowDetailsRef.current) {\n      console.log("justifiedRowDetailsRef.current > NOT EMPTY");\n\n      setJustifiedRowDetailsWidth(justifiedRowDetailsRef.current.offsetWidth);\n      setJustifiedRowDetailsHeight(justifiedRowDetailsRef.current.offsetHeight);\n    }\n  }, [previewImageHeight, isPreviewShown]);\n

\n

现在，第一次单击 时image，height是正确的，但如果我单击images不同的尺寸（例如square图像keep calm and eat food），则height的preview image仍使用之前的preview image高度（rectangle高度）并落后一步

\n

重现该错误的步骤：

\n

步骤1：

\n

\n

第2步：

\n

\n

步骤3：

\n

\n

步骤4：

\n

\n