Estoy trabajando en un sitio. El sitio tiene dos idiomas. Inglés y Árabe. También tiene pie de página y el pie de página se convierte en pestañas en las que se puede hacer clic cuando se trata de pantallas más pequeñas. La funcionalidad de clic funciona como se espera en una versión del idioma. Por ejemplo, funciona bien en la versión en inglés. Cuando cambio a la versión árabe, el sitio se vuelve a cargar y el evento de pestaña onClick parece activarse dos veces. Parece que eventHandler se registra dos veces cuando cambio el idioma.

¿Cómo puedo evitar que eventListener se registre dos veces?

A continuación se muestra el código.

 import { shape, string } from 'prop-types'; import React, { useEffect, useRef } from 'react'; import { useWindowSize } from '@magento/peregrine/lib/hooks/useWindowSize'; import { useStyle } from '@magento/venia-ui/lib/classify'; import CmsBlock from '@magento/venia-ui/lib/components/CmsBlock'; import defaultClasses from './footer.module.css'; const Footer = ({ classes }) => { const isMobile = useWindowSize().innerWidth < 1024; const initialized = useRef(false); useEffect(() => { if (!initialized.current && isMobile) { setTimeout(() => { initialized.current = true; const buttonElements = document.querySelectorAll('.col-links'); for (let i = 0; i < buttonElements.length; i++) { if (isMobile) { buttonElements[i].addEventListener('click', () => { console.log("clicked") // gets printed twice on language switch buttonElements[i].classList.toggle('active-tab'); }); } if (initialized.current && !isMobile) { buttonElements[i].classList.remove('active-tab'); } } }, 500); } }, [isMobile]); const rootClasses = useStyle(classes, defaultClasses); return ( <footer id="footer" className={rootClasses.root}> <div className="footerWrapper"> <CmsBlock identifiers="footer" /> </div> </footer> ); }; export default Footer; Footer.propTypes = { classes: shape({ root: string }) };