使用useRef和useEffect更新值

Question

安装元素以显示进度条后，我需要获得元素的左侧位置。它可以在单击链接时使用，但是在安装时不会计算progressWidth。基本上，useEffect似乎在安装组件之前就已运行！

    export default ({ task, selectedLocal, selectedScenarioId, taskId, selectedTaskId }: ITaskNavItem) => {
    const isActiveNav = (match: any, location: object) => match;
    const isBefore = taskId <= selectedTaskId;
    const isActive = taskId === selectedTaskId;
    const navItemWidth = 100;
    const [progressWidth, setProgressWidth] = useState(0);
    const ref = useRef<HTMLInputElement>(null);

    useEffect(() => {
        if (ref.current) {
            console.log(ref.current.getBoundingClientRect().left);
            setProgressWidth(ref.current.getBoundingClientRect().left);
        }
    });


    const theme = getTheme();
    const styles = StyleSheet.create({
        navLink: {
            display: 'flex',
            fontSize: '12px',
            textDecoration: 'none',
            color: theme.palette.neutralPrimary
        },
        navLinkActive: {
            color: theme.palette.neutralPrimary,
            fontWeight: 'bold'
        },
        navTitle: {
            width: `${navItemWidth}px`,
            textAlign: 'center',
            wordBreak: 'break-word',
            wordSpacing: `${navItemWidth}px`
        },
        linkText: {
            display: 'flex',
            flexFlow: 'column',
            'align-items': 'center'
        },
        navIndicator: {
            borderRadius: '50%',
            margin: '10px 0 0 0',
            backgroundColor: theme.palette.white,
            width: '30px',
            height: '30px',
            border: '2px solid',
            borderColor: theme.palette.neutralPrimary,
            position: 'relative',
            'z-index': '3'
        },
        innerIndicator: {
            position: 'absolute',
            borderRadius: '50%',
            width: '20px',
            height: '20px',
            backgroundColor: theme.palette.neutralPrimary,
            top: '50%',
            left: '50%',
            transform: 'translate(-50%, -50%)'
        },
        activeNavIndicator: { borderColor: theme.palette.themePrimary },
        activeInnerIndicator: { backgroundColor: theme.palette.themePrimary },
        progress: {
            marginTop: '59px',
            'z-index': '2',
            position: 'fixed',
            left: '0',
            width: `${progressWidth}px`,
            borderBottom: '2px solid',
            borderColor: theme.palette.themePrimary
        }
    });

    return (
        <div className={css(styles.navLink)}>
            <NavLink
                exact
                isActive={isActiveNav}
                className={css(isActive ? [styles.navLink, styles.navLinkActive] : styles.navLink)}
                to={`/selectedLocal/${selectedLocal}/scenarios/${selectedScenarioId}/tasks/${taskId}`}
            >
                <div className={css(styles.linkText)}>
                    <div className={css(styles.navTitle)}> {task.title}</div>
                    <div
                        ref={ref}
                        className={css(
                            isBefore ? [styles.navIndicator, styles.activeNavIndicator] : styles.navIndicator
                        )}
                    >
                        <div
                            className={css(
                                isBefore ? [styles.innerIndicator, styles.activeInnerIndicator] : styles.innerIndicator
                            )}
                        />
                    </div>
                </div>
            </NavLink>
            {isActive && <div className={css(styles.progress)} />}
        </div>
    );
};

因此，当加载组件时，我得到图像1，单击该组件时，我得到图像2。我需要做的是，当加载组件时，它应该看起来像图像2。