Si hago clic derecho en el DivElement rojo, quiero cambiar mi estado
Como el estado ha cambiado, pensé que podía ver console.log
Pero no funciona
Aquí está mi código
import { useState, useRef, useEffect } from "react"; function Main() { const [testState, setTestState] = useState(0); const testRef = useRef(null); function clickHandler(event) { setTestState(testState + 1); } useEffect(() => { if (!testRef) return; testRef.current.addEventListener('contextmenu', (event) => { clickHandler(event) }); }, [testRef]); useEffect(() => { console.log('testState: ', testState); }, [testState]); return ( <div ref={testRef} style={{width: '100%', display: 'block', height: '32px', backgroundColor: 'red'}} /> ); } export default Main;el problema surge cuando hace referencia a su estado, tenga en cuenta que setState se ejecuta de forma asincrónica (piense en set state como una solicitud para volver a procesar el componente).
cambiando su setTestState(testState + 1); setTestState((oldVal) => oldVal + 1); tu ejemplo funcionará. echa un vistazo a este ejemplo de stackblitz
Saludos,
Debe usar una cleanup function y preventDefault en clickHandler.
import { useState, useRef, useEffect, useCallback } from "react"; function Main() { const [testState, setTestState] = useState(0); const testRef = useRef(null); const clickHandler = useCallback((event) => { event.preventDefault(); setTestState((test) => test + 1); }, []); useEffect(() => { const refElement = testRef.current; refElement.addEventListener("contextmenu", clickHandler); return () => refElement.removeEventListener("contextmenu", clickHandler); //cleanup function }, [clickHandler]); useEffect(() => { console.log("testState: ", testState); }, [testState]); return ( <div ref={testRef} style={{ width: "100%", display: "block", height: "32px", backgroundColor: "red" }} /> ); } export default Main;Aquí hay un fragmento de código de trabajo:
function Main() { const [testState, setTestState] = useState(0); const testRef = useRef(null); useEffect(() => { function clickHandler(event) { setTestState((old) => old + 1); } if (!testRef) return; const ref = testRef.current; ref.addEventListener("contextmenu", clickHandler); return () => ref.removeEventListener("contextmenu", clickHandler); }, [testRef, testState]); useEffect(() => { console.log("testState: ", testState); }, [testState]); return ( <div ref={testRef} style={{ width: "100%", display: "block", height: "32px", backgroundColor: "red", }} /> ); }