что закинуть в useEffect что бы он отработал после перерендера компонента
В общем суть такая, на сайте который я делал есть фильтры которые открываются и закрываются и часть из них рендерятся в цикле в зависимости от кастомных фильтров, то есть когда я что-то меняю из этого, все последующие фильтры показывают варианты исходя из отсортированных товаров по этих двух фильтрам и так же могут исчезать так как в них может не быть значений, maxHeight я регулирую через state который забиваю в useEffect при изменении отфильтрованных товаров в этих двух основных фильтрах, вот код
const ProductsFilter = () => {
// redux toolkit
const dispatch = useAppDispatch();
const { filterConfig } = useAppSelector((store) => store.FilterReducer);
// context
const filteredProducts = useContext(FilteredContext);
// state
const [height, setHeight] = useState(0);
// ref
const filterRef = useRef<HTMLDivElement>(null);
useEffect(() => {
if (!filterRef.current) return;
const height = filterRef.current.getBoundingClientRect().height;
console.log("ver-2 - ", height);
}, [filteredProducts]);
return (
<div className="product-filter__content-inner" ref={filterRef}>
{/* Custom filters */}
{FilterRouter.map(
(filter, i) =>
filterConfig[filter.name]?.active && <filter.module key={i} />
)}
{/* Auto generate filters */}
{uniqueProperty(filterModules, "name").map(
({ name, title, options }, i) => {
const globalFilterConfig: IFilterSelectModuleOptions = {
excludeEmpty: true,
excludeOneValue: true,
};
return (
filterConfig[name]?.active && (
<FilterByProperty
name={name}
title={title || getProductDetailLabel(name)}
options={{ ...options, ...globalFilterConfig }}
key={i}
/>
)
);
}
)}
{/* Очистить фильтры */}
<div className="product-filter__block product-filter__block__clear">
<button
className="product-filter__block__clear-btn"
onClick={() => dispatch(clearFilters())}
>
Очистить фильтр
</button>
</div>
</div>
);
};
Но проблема в том что высота береться сразу, то есть она забивается в state а после этого компонент перерендеривается так как поменялись отфильтрованные товары и получается что state отстает, думал какой нибудь callback повесить на компонент но не знаю за что цепляться, так как эти фильтры автоматически меняются и высота всего фильтра тоже
Изменено:
В общем нашел костыльное решение, вынес state на уровень выше, а в этот компонент закинул это и принимаю checkRender как аргумент
useEffect(() => checkRender(), [checkRender]);
и выше по уровню запускаю его, в таком случае хотя бы получаю реальную высоту думаю такое поведение пока что устроит если кто нибудь не предложит вариант по адекватнее
function checkRender() {
if (!productFilterRef.current) return false;
const pfc_inner = productFilterRef.current.children[0];
const newHeight = active ? pfc_inner.getBoundingClientRect().height : 0;
setHeight((prevHeight) =>
prevHeight !== newHeight ? newHeight : prevHeight
);
}
