重定向后useEffect未清理
让我解释一下我一整天都在解决的问题。我有一个网站的标题，这当然有反应路由器链接到其他页面(主页，项目，关于，服务，联系)。在'/projects‘页面和'/’(主页)页面中有一个项目组件。
我想在Project.js组件中制作一个简单的动画，这取决于是否有‘垂直’或没有这个道具。很明显，在‘/ ->’中，我想在滚动页面上做这个动画--在其他页面中则不是。
尝试通过在useEffect中添加if语句来执行此操作，但它不起作用，出现错误'cannot read property‘ref.current.style.transform = `translateY(${window.scrollY * -0.35}px)`;’of null
当我在header i.eg中更改页面时，出现了这个问题。我在“/projects”滚动中，并且动画正常，然后转到“/”，当滚动出现错误时，我已经在上面显示了。
这就像我的if语句不起作用，当我在'/‘哪个项目组件有道具时，vertical={false}在滚动上制作动画，而我不想这样做。
我想要什么？我只想在component有一个类似这样的道具‘垂直’的情况下使用useEffect制作动画：
Project.js组件代码：
const Project = ({ image, className, vertical }) => {
const ref = useRef(null);
const [isVertical, setIsVertical] = useState(vertical);
useEffect(() => {
console.log('component did mount');
isVertical
? window.addEventListener('scroll', () => {
ref.current.style.transform = `translateY(${window.scrollY * -0.35}px)`;
})
: console.log('non-vertical');
}, [isVertical]);
useEffect(() => {
return () => console.log('unmount');
});
return <StyledProject image={image} className={className} vertical={vertical} ref={ref} />;
};在home‘/’中：
{images.map(({ image, id }) => (
<Project key={id} image={image} />
))}在‘/projects’中：
{images.map(({ image, id }) => (
<StyledProject vertical image={image} key={id} />
))}当我在路径'/projects‘中并转到另一个路径时出错。这就像是在'/projects‘中保存了所有的语句，但是我想在每个页面上重置useEffect和ref.current
请帮帮我，我不能再往前走了，因为我不能解决这个问题。
提前谢谢。
回答 1
Stack Overflow用户
发布于 2020-04-05 16:39:15
主要问题是在卸载组件时没有删除事件侦听器。
Here你可以看到一个如何做的例子。
https://stackoverflow.com/questions/61045724
复制
相似问题
响应useEffect清理
获取数据后的reactjs useEffect清理功能
react useEffect未清理事件侦听器
如何清理useEffect函数？
useEffect清理/内存泄漏
领取专属 10元无门槛券
AI混元助手 在线答疑
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
