React Native中如何在函数外部访问内部创建的变量

Hey, 我完全懂你想在Firebase once('value')的回调外部使用gameOfTheUser的需求，而且还想要简单直接的解决方案对吧？没问题，这几个方法都很容易实现，选一个适合你代码场景的就行：

方法1：用Async/Await把异步操作“同步化” #

这应该是最直观的方案了，把Firebase的异步调用放到async函数里，用await等待结果返回，这样你就能在函数内部直接拿到gameOfTheUser，后续的条件判断也能顺理成章地写在后面：

// 在RouterScreen.js或App.js的合适位置（比如组件的useEffect里，或者某个事件处理函数中）
const getUserGameData = async () => {
  // 等待Firebase返回数据
  const snapshot = await userRef.once('value');
  // 拿到你要的变量
  const gameOfTheUser = snapshot.val();
  
  // 现在直接在这里写你的条件判断逻辑就行
  if (gameOfTheUser?.status === 'active') {
    // 比如跳转到游戏页面
    navigation.navigate('GameScreen');
  } else {
    // 引导用户创建新游戏
    navigation.navigate('CreateGame');
  }
};

// 调用这个异步函数
getUserGameData();

方法2：把后续逻辑抽成独立函数，在回调里调用 #

如果不想用async/await，也可以把你要做的条件判断逻辑封装成一个单独的函数，然后在then的回调里把gameOfTheUser传进去执行——这样看起来就像是在“外部”使用这个变量了：

// 先定义处理逻辑的函数
const handleGameLogic = (gameData) => {
  if (gameData) {
    // 根据gameData做各种判断
    console.log('用户已有游戏:', gameData);
    // 其他操作...
  } else {
    console.log('用户还没有游戏');
  }
};

// 调用Firebase的once方法，拿到数据后传给处理函数
userRef.once('value').then(snapshot => {
  const gameOfTheUser = snapshot.val();
  handleGameLogic(gameOfTheUser); // 在这里把变量传递出去
});

方法3：用React状态存储（组件内使用场景） #

如果是在React组件里需要全局访问这个变量，那用useState把它存在组件状态里就最合适了，这样组件的任何地方都能拿到这个变量，还能监听它的变化：

import { useState, useEffect } from 'react';

function YourComponent() {
  // 初始化状态为null
  const [gameOfTheUser, setGameOfTheUser] = useState(null);

  useEffect(() => {
    // 组件挂载时获取数据
    userRef.once('value').then(snapshot => {
      setGameOfTheUser(snapshot.val()); // 把数据存入状态
    });
  }, []);

  // 监听gameOfTheUser的变化，一旦有值就执行条件判断
  useEffect(() => {
    if (gameOfTheUser) {
      // 你的条件判断逻辑
      if (gameOfTheUser.score > 100) {
        alert('你是游戏大神！');
      }
    }
  }, [gameOfTheUser]);

  return (
    // 你的组件UI代码
    <div>{gameOfTheUser ? `当前游戏等级: ${gameOfTheUser.level}` : '加载中...'}</div>
  );
}

为什么原来的方式不行？ #

简单说，userRef.once('value')是异步操作，它的回调函数（就是你写的then(snapshot => {})里的代码）会在Firebase返回数据之后才执行，但你外部的同步代码会先跑——所以如果直接在回调外面声明变量然后想赋值后使用，你会发现变量还是undefined，因为回调还没执行呢。上面的几个方法都是用异步的思路来适配这个特性，所以能顺利拿到变量。

内容的提问来源于stack exchange，提问作者Jean