Javascript React中切换路由后的Null ref

我有一个有趣的错误，我似乎无法解决，我希望有人比我更好的反应知识可以帮助我解决

基本上，我有一个组件（slider carousel，像Netflix队列）试图设置两个元素的可见性（左导航和右导航的导航滑块按钮），如果底层开发人员溢出和/或底层div位于某个位置。当onComponentDidMount、基础div的位置更改以及窗口调整事件侦听器时，将调用我的可见性设置器方法

它的工作原理与预期的大多数时间，然而，我有一个边缘的情况下，我可以调整窗口的大小，即使在去了一个新的路线，它将工作的预期。。。但是，如果我再次使用新的路径，则在此时调整窗口大小时会出现错误

第二次切换路由后，似乎没有设置REF，因为它们返回null

我尝试检测ref是否为null，但无法正常工作

setCaretVis() {

 const el = this.tray.current;
 console.log(el);

 const parent = this.wrapper.current;
 console.log(parent);

 const posRight = this.offsetRight();
 const posLeft = el.scrollLeft;
 const left = this.caretLeft.current;
 const right = this.caretRight.current;

 const parWidth = el.parentElement.offsetWidth;


 const width = el.scrollWidth;


 if (parWidth >= width) {

   if (!left.classList.contains("invis")) {
     left.classList.add("invis");
   } else if (left.classList.contains("invis")) {

   }
   if (!right.classList.contains("invis")) {
     right.classList.add("invis");
   }
 } else if (parWidth < width) {
   if (left.classList.contains("invis") && posLeft != 0) {
     left.classList.remove("invis");
   } else if (!left.classList.contains("invis") && posLeft === 0) {
     left.classList.add("invis");
   }
   if (right.classList.contains("invis") && posRight != 0) {
     right.classList.remove("invis");
   } else if (!right.classList.contains("invis") && posRight === 0) {
     right.classList.add("invis");
   }
 }


 if (posLeft > 0) {
   left.classList.remove("invis");
  } else {
   left.classList.add("invis");
  }
 if (posRight === 0) {
  console.log("true");
  right.classList.add("invis");
 } else {
  right.classList.remove("invis");
 }
}

offsetRight() {
 const el = this.tray.current;
 //const element = this.refs.tray;

 const parent = this.wrapper.current;
 const parWidth = parent.offsetWidth;

 const width = el.scrollWidth;

 const left = el.scrollLeft;

 let sub = width - parWidth;
 let calc = Math.abs(left - sub);

 return calc;
};

// The componentDidMount method
   componentDidMount() {
   this.setCaretVis();
   window.addEventListener("resize", this.setCaretVis);
   this.setCaretVis();
}

setCaretVis（）{
const el=此.tray.current；
控制台日志（el）；
const parent=this.wrapper.current；
console.log（父级）；
const posRight=this.offsetRight（）；
const posLeft=el.scrollLeft；
const left=this.caretLeft.current；
const right=this.caretRight.current；
const parWidth=el.parentElement.offsetWidth；
常数宽度=标高宽度；
if（parWidth>=宽度）{
如果（！left.classList.contains（“Invi”））{
left.classList.add（“invi”）；
}else if（left.classList.contains（“invi”））{
}
如果（！right.classList.contains（“Invi”））{
右。classList.add（“invi”）；
}
}否则如果（parWidth0）{
left.classList.remove（“invi”）；
}否则{
left.classList.add（“invi”）；
}
if（posRight==0）{
console.log（“真”）；
右。classList.add（“invi”）；
}否则{
右。classList.remove（“invi”）；
}
}
抵销权{
const el=此.tray.current；
//常量元素=this.refs.tray；
const parent=this.wrapper.current；
const parWidth=parent.offsetWidth；
常数宽度=标高宽度；
const left=el.left；
设sub=宽度-parWidth；
设calc=Math.abs（left-sub）；
返回计算；
};
//组件安装方法
componentDidMount（）{
this.setCaretVis（）；
window.addEventListener（“resize”，this.setCaretVis）；
this.setCaretVis（）；
}

我想在路由更改后无误地调整大小时设置可见性（添加/删除css类）

---

当前错误读取：Uncaught TypeError:无法读取null的属性“offsetWidth”

我怀疑当您再次转到新路由时会重新创建组件，但旧侦听器仍由

调整大小处理程序调用。尝试删除
组件willunmount
中的事件侦听器：

componentDidMount() {
    this.setCaretVis();
    window.addEventListener("resize", this.setCaretVis);
    this.setCaretVis();
}

componentWillUnmount() {
    window.removeEventListener("resize", this.setCaretVis);
}

当路由器重新创建组件时，它将再次订阅
resize
事件

从文档中：

componentWillUnmount（）将在卸载和销毁组件之前立即调用。在此方法中执行任何必要的清理，例如使计时器无效、取消网络请求或清理在componentDidMount中创建的任何DOM元素

这正是我所需要的，我觉得自己很傻，因为现在这太明显了。非常感谢你花时间考虑这个问题！