в компоненте есть несколько асинхронных диспатчей, с помощью которых наполняется контент:
useEffect(() => {
dispatch(fetchAllItems())
dispatch(fetchAllPositions())
dispatch(fetchAllUsers())
}, [])
далее я навешиваю на элемент ref:
const mainRef = useRef<HTMLDivElement>(null)
а потом пытаюсь получить высоту элемента в том же useEffect
:
mainRef.current && console.log(mainRef.current.clientHeight)
так вот, в консоль возвращается 0. я так понимаю это происходит именно из-за диспатчей - высота элемента берется тогда, когда он еще не успел наполнится содержимым.
вопрос: когда именно я могу получить высоту заполненного элемента? я так понимаю мы должны подождать пока выполнятся все диспатчи, подскажите как это реализовать
весь компонент:
import {FC, useEffect, useRef, useState} from 'react'
import cn from 'classnames'
import {fetchAllItems, fetchAllUsers, fetchAllPositions, useAppDispatch, useAppSelector} from '_store'
import {OrgHeader} from 'widgets/OrgHeader'
import {OrgItem} from 'widgets/OrgItem'
import s from './OrgPage.module.scss'
export interface OrgPageProps {
className?: string
}
export const OrgPage:FC<OrgPageProps> = ({className}) => {
const dispatch = useAppDispatch()
const {items, positions} = useAppSelector(state => state.orgItems)
const {scale} = useAppSelector(state => state.orgHeader)
const startRef = useRef<HTMLDivElement>(null)
const [mainHeight, setMainHeight] = useState(0)
const mainRef = useRef<HTMLDivElement>(null)
useEffect(() => {
dispatch(fetchAllItems())
dispatch(fetchAllPositions())
dispatch(fetchAllUsers())
if (mainRef.current) {
setMainHeight(mainRef.current.clientHeight)
}
}, [])
return (
<div className={cn(s.orgPage, [className])}>
{mainHeight}
<OrgHeader className={s.header}/>
<div className={s.main} ref={mainRef}>
<div className={s.start} ref={startRef}>
{items.map(item => {
const itemPositions = positions.find(position => position.item_id === item.id)
if (!itemPositions) return
return (
<OrgItem
key={item.id}
name={item.name}
id={item.id}
administration={item.administration}
positions={itemPositions}
/>
)
})}
</div>
</div>
</div>
)
}