const [flag, setFlag] = useState(false) let visibleActive, visibleTransition const handleSelect = () => { setFlag(!flag) visibleActive = flag ? 'visible active' : '' visibleTransition = flag ? 'visible transition' : '' console.log(flag) console.log(visibleActive) console.log(visibleTransition) } return ( <> <div className="ui form"> <div className="field"> <label className="label">Select a color</label> <div className={`ui selection dropdown ${visibleActive}`} onClick={handleSelect}> <i className="dropdown icon"></i> <div className="text">Select Color</div> <div className={`menu ${visibleTransition}`}> </div> </div> </div> </div> </> )las clases no cambian cuando hago clic en el menú desplegable. Veo los resultados en la consola, pero no se aplica lo mismo en el JSX. Las variables 'visibleTransition' y 'visibleActive' tienen los valores correctos, pero estos valores aún no se aplican.
Las llamadas de React setState se procesan por lotes y se ponen en cola, y las actualizaciones de estado pueden ser asíncronas . No puede acceder al estado de la flag inmediatamente después de configurarlo.
Las variables visibleActive , visibleTransition perderán sus valores después de volver a renderizar. Puede usar useRef para mantener un valor entre renderizaciones.
import {useRef} from 'react' const visibleActive = useRef("") const visibleTransition = useRef("") Puede asignar un valor a ref como visibleActive.current = flag ? "visible active" : "";
y Use useEffect para obtener el valor de estado de flag correcto
useEffect(() => { visibleActive.current = flag ? "visible active" : ""; visibleTransition.current = flag ? "visible transition" : ""; console.log(flag); console.log(visibleActive); console.log(visibleTransition); }, [flag]);