0
95
ViewsEvitar que el Event Listener active el evento varias veces
Estoy usando este detector de eventos para activar un evento que básicamente actualiza mi estado de Intervalo en un efecto de uso y me permite subir y bajar en mi tabla. El enfoque hacia arriba y hacia abajo funciona bien para mí, pero activa el evento varias veces. Esta activación múltiple del evento que causa los eventos de arriba y abajo funciona lentamente y se ralentiza en todas las aplicaciones.
useEffect(() => { console.log("HAAN MEI WUHI PAPPI HUN"); document.addEventListener("keyup", (e) => { if (e.shiftKey && e.code === "ArrowRight") { console.log("shift + right", vjsRef.current.currentTime); vjsRef.current.currentTime = vjsRef.current.currentTime + 1; } else if (e.shiftKey && e.code === "ArrowLeft") { console.log("fire! left", vjsRef.current.currentTime); vjsRef.current.currentTime = vjsRef.current.currentTime - 1; } }); document.addEventListener("keyup", async(event) => { if (event.code === "ArrowUp") { console.log('aj mei upar '); await props.setSelectInterval(props.selectInterval - 1); } if (event.code === "ArrowDown") { if (props.selectInterval + 1 < props.row.length) { console.log('asmaan nichay'); props.setSelectInterval(props.selectInterval + 1); } } }); }, []); 
3 answers
Answer question0
Para asegurarme de que los oyentes solo se agreguen una vez, una cosa que hago es llamar a removeEventListener antes de cada addListener
console.log("HAAN MEI WUHI PAPPI HUN"); var foo = (e) => { if (e.shiftKey && e.code === "ArrowRight") { console.log("shift + right", vjsRef.current.currentTime); vjsRef.current.currentTime = vjsRef.current.currentTime + 1; } else if (e.shiftKey && e.code === "ArrowLeft") { console.log("fire! left", vjsRef.current.currentTime); vjsRef.current.currentTime = vjsRef.current.currentTime - 1; } } document.removeEventListener("keyup", foo); document.addEventListener("keyup", foo);0
Para evitar que React agregue múltiples detectores de eventos desde el gancho useEffect, puede devolver una función de limpieza para eliminar el detector de eventos dentro del gancho useEffect. La función de limpieza se ejecutará cada vez que se desmonte el componente. p.ej:
useEffect(() => { const yourFunction = () => {console.log('hi')} document.addEventListener('keyup', yourFunction) return () => { document.removeEventListener('keyup', yourFunction) } }, [])Esto es ideal para eliminar detectores de eventos. Puede consultar la sección de limpieza en la página de enlace de React useEffect: https://reactjs.org/docs/hooks-effect.html
0
useEffect(() => { var foo1 = (e) => { if (e.code === "ArrowUp") { if (props.selectInterval - 1 >= 0) { props.setSelectInterval(props.selectInterval - 1); } } if (e.code === "ArrowDown") { if (props.selectInterval + 1 < props.row.length) { props.setSelectInterval(props.selectInterval + 1); } } }; document.addEventListener("keyup", foo1); return () => { document.removeEventListener("keyup", foo1); }; }, [props.selectInterval]);bien esto funciona para mí! ¡Gracias a los dos colaboradores anteriores!