javascript - React 中切换路由后引用为空

Question

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

基本上，我有一个组件( slider 轮播，如 Netflix 队列)，如果底层开发溢出和/或如果底层 div 位于某个位置。当 onComponentDidMount 时、当底层 div 的位置发生变化时以及使用窗口调整大小事件监听器时，将调用我的可见性 setter 方法。

它在大多数情况下都按预期工作，但是，我有一个边缘情况，即使在转到新路线之后，我也可以调整窗口大小，并且它会按预期工作...但是如果我走新路线此时调整窗口大小时再次出现错误。

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

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

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

我想在路由更改后调整大小时设置可见性(添加/删除 css 类)而不会出现错误。

当前错误为:未捕获类型错误:无法读取 null 的属性“offsetWidth”

Answer 1

我怀疑当您再次转到新路由时会重新创建您的组件，但旧的监听器仍由 resize 处理程序调用。尝试在 componentWillUnmount 中删除事件监听器:

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

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

当router重新创建组件时，它会再次订阅resize事件。

来自文档:

componentWillUnmount() is invoked immediately before a component is unmounted and destroyed. Perform any necessary cleanup in this method, such as invalidating timers, canceling network requests, or cleaning up any DOM elements that were created in componentDidMount