在反应中卸载组件时消除功能的副作用？

如何解决在反应中卸载组件时消除功能的副作用？

我正在开发一个 react-app 并使用以下函数来跟踪导航面板中的活动链接。

以下函数使用 IntersectionObserver 来跟踪给定元素是否在视口中。

代码能够解决其动机。
但是当我将路由更改为不同的组件时，它会显示错误 - TypeError: Cannot read property 'parentElement' of null

那是因为使用函数 changeActiveLink(); 的组件不在页面中（它已卸载）。

我想在移除组件时移除此功能的影响。

我尝试将其与 DOMContentLoaded eventListener 集成，然后清理该事件侦听器，但此事件侦听器仅适用于 HTML 文档的第一次呈现，当我们在离开函数 {{1} 的所需路线上呈现组件时不起作用} 未初始化。

我应该如何让这个功能只在这个特定的组件中工作，而避免它对其他组件的影响？

Screenshot of error screen

changeActiveLink();

解决方法

返回一个 useEffect cleanup function，它将 un-observe 目标元素：

useEffect(() => {
  const changeActiveLink = () => {

    const scrollHandler = (entries) => {
      entries.forEach((entry) => {
        const id = entry.target.getAttribute("id");

        if (entry.intersectionRatio > 0) {
          document
            .querySelector(`nav li a[href="#${id}"]`)
            .parentElement.classList.add("active");
        } else {
          document
            .querySelector(`nav li a[href="#${id}"]`)
            .parentElement.classList.remove("active");
        }
      });
    };

    const observer = new IntersectionObserver(scrollHandler);

    const sections = document.querySelectorAll("section[id]");

    // Track all sections that have an `id` applied
    sections.forEach((section) => {
      observer.observe(section);
    });
    
    return () => {
      // untrack all sections that have an `id` applied
      sections.forEach((section) => {
        observer.unobserve(section);
      });
    }; // return the cleanup function
  };

  return changeActiveLink(); // you should also return the function here

},[]);