0

в компоненте есть несколько асинхронных диспатчей, с помощью которых наполняется контент:

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

1 ответ 1

1

есть несколько асинхронных диспатчей ... когда именно я могу получить высоту заполненного элемента?

Если dispatch действительно асинхронный - можно дождаться разрешения всех таких промисов и только потом выяснять все остальное...

useEffect(() => {
  const p = [
    dispatch(fetchAllItems()),
    dispatch(fetchAllPositions()),
    dispatch(fetchAllUsers()),
  ]
  Promise.all(p)
    .then(_ => {
      if (mainRef.current) {
        setMainHeight(mainRef.current.clientHeight)
      }
    })
    .catch(console.log)

}, [])
2
  • благодарю. я как раз сам решил: примерно тоже что и у вас - просто вынес все диспатчи в асинхронную функцию, после которой вызвал .then(() => console.log(...))
    – Meth0d
    Commented 9 авг. 2023 в 9:53
  • @Meth0d, ну это уже дело вкуса! :)
    – ksa
    Commented 9 авг. 2023 в 9:53

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.