Para dar contexto a la situación en el cual ocurre el problema.
Tengo el siguiente useState en el cual controlo los valores de un score para un juego de dos equipos:
const [score, setScore] = useState({teamA:0, teamB:0});
y tengo las siguientes funciones para actualizar los datos del score según el equipo que haya hecho el punto:
const playWinner = (letterTeam: 'A' | 'B' ) =>{
if(letterTeam === 'A'){
setScore({
...score,
teamA: score.teamA+1
});
if(verifyWinner(score) === 'A'){ // verifyWinner es un helper que me devuelve el ganador del juego (A, B o null)
alert('Ganador Equipo A')
}
else{
// ...
}
}
else{
setScore({
...score,
teamB: score.teamB+1
});
if(verifyWinner(score) === 'B'){ // verifyWinner es un helper que me devuelve el ganador del juego (A, B o null)
alert('Ganador Equipo B')
}
else{
// ...
}
}
}
El orden de las acciones es :
1.- Actualizo el score(con el setScore()
) sumando 1 punto según el equipo que lo haya hecho.
2.- Evaluó con el helper(verifyWinner()
) si el puntaje es el suficiente para ganar el juego.
Es cuando llego al segundo punto que noto un problema, y es que si bien la actualización del score se realiza correctamente, cuando evaluo quien gano el juego, los datos del score no están actualizados. Según la respuesta a la siguiente pregunta pude entender que los setters de los estados pueden ejecutarse de forma asíncrona, lo cual se entiende el comportamiento que obtengo en mi código.
El problema en realidad es:
¿Hay alguna forma de usar el setScore()
de forma síncrona para luego usar el dato ya actualizado?
O
¿Cómo puedo evaluar (inmediatamente luego de usar el setScore()
) si ya obtuve un ganador en base al score
ya actualizado?
A
ganador. Puede ser por eso?