Estoy usando el siguiente useEffect en un componente para controlar el estado activo en una navegación lateral de anclaje para la página.

 const [activeIndex, setActiveIndex] = useState(0); useEffect(() => { const handleScroll = (e: Event) => { var index = nearestIndex( window.scrollY, Anchors, 0, Anchors.length - 1 ); setActiveIndex(index); } document.addEventListener("scroll", handleScroll); return () => { document.removeEventListener("scroll", handleScroll); } }, [Anchors]);

Cuando navego a otra página usando next/link , el detector de eventos de scroll se activa y luego se elimina. Esto está provocando un error dentro nearestIndex porque las referencias dentro de Anchors ahora son null .

EDITAR: Explicación de flujo de página/componente

1. Navegar a la página 1: muestra el componente Anchor Links con el código anterior
2. Haga clic en el enlace de anclaje: la página se desplaza un poco hacia abajo
3. Vaya a la página 2: no contiene el componente Anchor Links, el detector de eventos de scroll se activa y arroja un error, luego se elimina el detector
4. Vaya a la página 3: no contiene el componente Anchor Links, no hay error porque el detector de eventos de scroll ya no está registrado