1

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?

2
  • en ambos casos estas comprobando el equipo A ganador. Puede ser por eso?
    – hawks
    Commented el 17 jun. 2021 a las 21:05
  • Eso fue por el copy paste, enseguida lo edito para que la pregunta no tenga errores... Igual aun así, el problema es ajeno a ese detalle Commented el 17 jun. 2021 a las 21:10

3 respuestas 3

0

Según entiendo, la función para cambiar el valor que retornan los useState no hace el cambio de state inmediatamente, sino que deja el cambio a la cola, cosa que cuando se termine de ejecutar el scope de tu función playWinner(...) se ejecutará un re-renderizado de tu componente con el valor cambiado.

Una opción es que uses la referencia que ya tienes de score para pasarselo a tu función:

const playWinner = (letterTeam: 'A' | 'B' ) =>{
    const newScore = score
    if(letterTeam === 'A'){
        newScore.teamA += 1
        setScore(newScore);
        if(verifyWinner(newScore) === 'A'){ // verifyWinner es un helper que me devuelve el ganador del juego (A, B o null)
            alert('Ganador Equipo A')
        }
        else{
            // ...
        }
    }
    else{
        newScore.teamB += 1
        setScore(newScore);
        if(verifyWinner(newScore) === 'B'){ // verifyWinner es un helper que me devuelve el ganador del juego (A, B o null)
            alert('Ganador Equipo A')
        }
        else{
            // ...
        }
    }
}

Otra implementación que me gusta mas sería que la verificación de ganador la hagas en el body de tu componente de React, de esta manera podrías renderizar algo distinto cuando tengas un ganador.

const Partida = (props) => {
  const [score, setScore] = useState({teamA:0, teamB:0});
  const playWinner = (letterTeam: 'A' | 'B' ) =>{
    if(letterTeam === 'A'){
        setScore({
            ...score,
            teamA: score.teamA+1
        });
    }
    else{
        setScore({
            ...score,
            teamB: score.teamB+1
        });
    }
  }
  const winnner = verifyWinner(score)
  if(winner){
    alert(`Ganador equipo ${winner}`)
    return // Mostrar pantalla de partida terminada
  }
  return // mostrar pantalla de partida en progreso
}
0

Hay alternativas, como por ejemplo usar el hook useEffect:

function App(){
    const [score, setScore] = useState({teamA:0, teamB:0});

    const playWinner = (letterTeam: 'A' | 'B' ) =>{
        if(letterTeam === 'A'){
            setScore({
            ...score,
            teamA: score.teamA+1
            });
        }
        else{
            setScore({
            ...score,
            teamB: score.teamB+1
            });
        }
    }

    useEffect(()=>{
        console.log(score);
    /*
     if(verifyWinner(score) === 'B'){ // verifyWinner es un helper que     me   devuelve el ganador del juego (A, B o null)
                alert('Ganador Equipo B')
            }
            else{
                // ...
            }*/
    }, [score])

    //código...
    return null;

}
0

Puedes seguir utilizando el useState, sin embargo, para asegurar que ya tengas el dato, puedes utilizar useEffect(). Aquí te dejo un ejemplo de cómo podrás utilizarlo. (primero recuerda importar useEffect).

import React, {useEffect} from 'react'
//Aquí va todo el código que ya has puesto, el useEffect lo pones abajo (dentro del componente)

useEffect(() => {
    console.log(score) //El console log es opcional, sólo para que veas con seguridad que ya tienes el dato

    //aquí puedes colocar todo el código que quieras con el score ya actualizado

}, [score])//poner el score dentro del array indica que useEffect esperará hasta que el score termine de actualizarse (lo que te dará un resultado síncrono, ya que asegurarás siempre tener el dato actualizado.

¡Espero te ayude!

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.