Estoy tratando de establecer mi estado de uso en la id of clicked element cuando el usuario hizo clic en él. Pero muestra una cadena vacía cuando intento consolarlo y enviarlo. Entonces, parece que no estableció con éxito el estado. y no se porque

Este es el fragmento de código de la misma:

 const Game = () => { const [gameMode, setGameMode] = useState(''); const dispatch = useDispatch(); return ( <div id='computer' className='to-play-computer' onClick={(e) => { setGameMode(e.currentTarget.id); // THIS DOESN'T CHANGE THE gameMode state to id 'computer' // WAIT UNTIL THIS FUNCTION DONE handleClickGameMode(e) .then(() => { console.log(gameMode); // IT WILL CONSOLE EMPTY STRING dispatch(isGamePlay(gameMode)); }) }}> <div className='icon-gameplay'> <FaRobot /> </div> <p className='description-gameplay'> vs Computer </p> </div> ) }

Pero si lo asigna a una variable simple, así:

 let gameMode = ""; // This will store the id of clicked element const dispatch = useDispatch(); return ( <div id='computer' className='to-play-computer' onClick={(e) => { gameMode = e.currentTarget.id // changed // WAIT UNTIL THIS FUNCTION DONE handleClickGameMode(e) .then(() => { console.log(gameMode); // IT WILL SUCCESSFULY CONSOLE 'COMPUTER' dispatch(isGamePlay(gameMode)); }) }}> <div className='icon-gameplay'> <FaRobot /> </div> <p className='description-gameplay'> vs Computer </p> </div> )

Entonces, ¿cómo hacer que esto sea exitoso usando useState? Y tal vez puedas explicarme por qué sucedió esto. Porque en otros proyectos que he creado, como setState del formulario de entrada onChange , no creó este problema. Gracias.