React控制台可打印Firebase用户邮箱，setState赋值后状态无更新问题

• React的状态更新为异步批处理机制，调用setEmail后不会立刻修改当前执行上下文内的email变量，本次useEffect运行周期内拿到的仍然是初始空值，因此set赋值后立刻打印会得到旧值，并不是状态没有更新成功。
• 当前代码存在隐藏风险：Firebase的auth.currentUser在组件初始化阶段可能为null，你当前测试场景下刚好auth初始化完成才拿到了有效值，直接在空依赖useEffect中取值可能在弱网、首次加载等场景下出现报错。

1. 验证状态更新&执行业务逻辑 #

如果要拿到更新后的状态做后续操作，新增单独的useEffect监听email变化即可，状态更新后会自动触发该effect执行：

useEffect(() => {
  // 此处可拿到更新后的邮箱值
  console.log(email);
  // 拉取关联业务数据的逻辑写在这里
  if (email) {
    // 调用对应业务接口
  }
}, [email])

2. 兼容Firebase auth状态动态变化 #

更稳妥的写法是使用Firebase官方提供的onAuthStateChanged监听登录状态变化，避免currentUser未初始化的问题：

useEffect(() => {
  const unsubscribe = auth.onAuthStateChanged(user => {
    if (user) {
      setEmail(user.email);
      setUID(user.uid);
    }
  })
  // 组件卸载时取消监听避免内存泄漏
  return () => unsubscribe();
}, [])

3. 复用现有AuthContext #

你代码中已经引入了AuthContext，通常全局用户登录状态都会在Context中统一维护，直接从Context取值可以避免多组件重复写监听逻辑：

const { user } = useContext(AuthContext);
useEffect(() => {
  if (user) {
    setEmail(user.email);
    // 执行业务逻辑
  }
}, [user])

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