0
183
Vistas¿Por qué obtengo dos registros de consola cuando debería ser solo uno? reaccionar js
Tengo una sección simple en reaccionar que contiene dos botones, logotipo y banner, al hacer clic estoy abriendo un modal simple desde el componente web, ahora quiero que cuando el usuario haga clic en cancelar me muestre algo en la consola.
Problema: cuando hago clic, por ejemplo, en el botón Logo que abre el modal y hago clic en cancelar, obtengo el registro de la consola que quiero, y luego hago clic en el botón de banner y abro el modal y hago clic en cancelar, en lugar de dar solo registros relacionados con el botón de banner Obtengo ambos registros.
mi código Demostración en vivo: demostración en vivo
import * as element from "./custom-element"; const Images = () => { const [imgName, setImgName] = useState(); const [logo, setLogo] = useState(); const [banner, setBanner] = useState(); const elementRef = useRef(null); const handleUseImage = () => { switch (imgName) { case "logo": console.log("logo name", imgName); break; case "banner": console.log("banner name", imgName); break; default: } }; useEffect(() => { if (imgName) { elementRef.current.addEventListener("cancel", function (e) { handleUseImage(e); }); } }, [imgName]); const handleLogo = () => { setImgName("logo"); openModal(); }; const handleBanner = () => { setImgName("banner"); openModal(); }; const openModal = () => { elementRef.current.visible = true; }; return ( <div className="App"> <custom-element ref={elementRef}></custom-element> <button onClick={handleLogo}>Logo </button> <button onClick={handleBanner}>Banner </button> <span>Logo url: {logo} </span> <span>banner url: {banner} </span> </div> ); }; export default Images; [
][2
¿Por qué obtengo ambos registros?
1 Respuestas
Responde la pregunta0
Podría estar equivocado, pero estoy bastante seguro de que el problema es que nunca elimina el detector de eventos, por lo que cuando llame a setImgName se volverá a procesar, y ahora tendrá dos detectores de eventos, uno que está "fuera de alcance" ( a falta de un término mejor, no tiene los valores de estado "actuales", como lo era en un renderizado anterior). lo intentaré
useEffect(() => { if (imgName) { elementRef.current.addEventListener("cancel", handleUseImage); return () => { elementRef.current.removeEventListener("cancel", handleUseImage); } } }, [imgName]);