#javascript #reactjs
Вопрос:
У меня проблема с компонентом, который управляет плавной прокруткой. При обновлении страницы у меня нет никаких проблем, но при изменении маршрута я получаю ответ Cannot read property 'style' of null
Четко и подкреплено ошибкой в компоненте Object is possibly 'undefined'.ts(2532)
Я знаю, что на маршруте изменение ref
еще не применено. Однако я не могу понять, как это исправить. Рассматривая другие вопросы, связанные с аналогичной проблемой , все они предлагают использовать useEffect()
, что я и делаю. Что я делаю не так?
Компонент является
const Scroll: React.FC = ({ children }) => {
const windowSize = useWindowSize();
const scrollingContainerRef = useRef();
const data = {
ease: 0.1,
current: 0,
previous: 0,
rounded: 0,
};
const setBodyHeight = () => {
if (isBrowser)
document.body.style.height = `${
scrollingContainerRef.current.getBoundingClientRect().height // Object is possibly 'undefined'.ts(2532)
}px`;
};
useEffect(() => {
setBodyHeight();
}, [windowSize.height]);
const smoothScrollingHandler = () => {
data.current = isBrowser amp;amp; window.scrollY;
data.previous = (data.current - data.previous) * data.ease;
data.rounded = Math.round(data.previous * 100) / 103;
scrollingContainerRef.current.style.transform = `translateY(-${data.previous}px)`; // Object is possibly 'undefined'.ts(2532)
requestAnimationFrame(() => smoothScrollingHandler());
};
useEffect(() => {
requestAnimationFrame(() => smoothScrollingHandler());
}, []);
return (
<Wrapper>
<div ref={scrollingContainerRef}>{children}</div>
</Wrapper>
);
};
Комментарии:
1. что делать, если вы используете useLayoutEffect вместо useEffect?
2. @ssBarBee. Попробовал это и все та же проблема.
3. возможно, уместно: medium.com/@teh_builder/…
4. @ssBarBee. Да, это работает. Огромное спасибо. Ты хотел сказать это в качестве ответа, чтобы я мог принять?
5. конечно, @Даррен, спасибо
Ответ №1:
Следите за статьей https://medium.com/@teh_builder/ref-objects-inside-useeffect-hooks-eb7c15198780. В нем показано, как использовать ссылки с помощью useEffect.