異步 function 本機反應

Question

我們必須在 Android 模擬器上使用 Firebase 實時數據庫在 React Native 中創建賓果游戲。 該應用程序游戲適合 2 位玩家。 當第一個玩家進入應用程序時，他創建游戲並等待第二個玩家加入。 我們想創建一個屏幕，上面寫着：“等待另一位玩家”出現在第一個玩家，直到第二個玩家連接，然后當第二個玩家連接卡時顯示。

我們編寫了這段代碼，但它返回“未定義”。

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);
}

我們認為這是由於“async”和“await”無法正常工作所致。

你有什么建議嗎？ 我們如何將第一個玩家重定向到等待屏幕？

Answer 1

ref(getDatabase())是 promise 嗎？ 如果是，則在它之前使用 await 。

如果您在調用時使用 await，則在 setGame 之前使用 async function。

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);
        });
    }