异步 function 本机反应

Question

We have to create a Bingo game in React Native with Firebase Realtime Database on Android simulator. The app game is for 2 players. When the first player enter in the app, he create the game and wait for the second player to join. we want to create a screen with the writing: "Waiting for another player" that appears to the first player until the second player connects then when the second player connects the card is shown.

We wrote this code but it return 'undefined'.

function Game(){

  const authCtx = useContext(AuthContext);

  const gameCtx = useContext(GameContext);

  const [loadPlayer, setLoadPlayer] = useState(false);



  useEffect(() => {

    async function gamePlay(){

      gameCtx.player1 = authCtx.token;

      const play = await setGame(authCtx.token, gameCtx);

      console.log(play); //return undefined 

      if(play == 'CREATE'){

        setLoadPlayer(true);

      }else if(play == 'UPDATE'){

        setLoadPlayer(false);

      }

      if(loadPlayer){

        return <LoadingOverlay message="Waiting for another player... " />;

      }

    }

    gamePlay();

  }, []);



  return <Card />;

}



export default Game;

export function create(game){
    const db = getDatabase();
    const newGameKey = push(child(ref(db), 'GAME')).key;
    set(ref(db, '/GAME/' + newGameKey), game)
    .then(() => {console.log('Game Create!');})
    .catch((error) => {console.log(error);});
}

export function setGame(email, game){
    const dbRef = ref(getDatabase());
    var player = false;
    get(child(dbRef, 'GAME/')).then((snapshot) => {
        if (snapshot.exists()) {
            snapshot.forEach(function(childSnapshot) {
                const key = childSnapshot.key;
                const key1 = snapshot.child(key + '/player1').val();
                const key2 = snapshot.child(key + '/player2').val();
                if( key2 == "" && email != key1){
                    console.log('P2');
                    updateGame(email, key);
                    player = true;
                    return true;
                }
            });
            if(player == false){
                console.log('P1');
                player = true;
                create(game);
            }
        } else {
            //create the first game!
            create(game);
        }
    }).catch((error) => {
        console.error(error);
    });
}

export function updateGame(email, key){
    console.log('Update: ' + key);
    const db = getDatabase();
    const updates = {};
    updates['/GAME/' + key + '/player2'] = email;
   return update(ref(db), updates);
}

We think this is due to "async" and "await" because not working correctly.

Do you have any suggestions? How can we redirect the first player to a waiting screen?

Answer 1

is ref(getDatabase()) is promise?. if it is then use await before it.

and use async function before setGame if you are using await while calling.

export async function setGame(email, game){
        const dbRef = await ref(getDatabase());
        var player = false;
        get(child(dbRef, 'GAME/')).then((snapshot) => {
            if (snapshot.exists()) {
                snapshot.forEach(function(childSnapshot) {
                    const key = childSnapshot.key;
                    const key1 = snapshot.child(key + '/player1').val();
                    const key2 = snapshot.child(key + '/player2').val();
                    if( key2 == "" && email != key1){
                        console.log('P2');
                        updateGame(email, key);
                        player = true;
                        return true;
                    }
                });
                if(player == false){
                    console.log('P1');
                    player = true;
                    create(game);
                }
            } else {
                //create the first game!
                create(game);
            }
        }).catch((error) => {
            console.error(error);
        });
    }