React中useState与Firebase登录状态存储问题求助

问题分析 #

你的代码存在两个核心问题：

• 登录成功后仅将用户信息赋值给临时变量tempUser，未调用setUser更新React状态，组件无法感知登录状态变化
• 同时使用自定义useState(user)和react-firebase-hooks的useAuthState，功能重叠易导致状态不一致

方案一：手动更新状态（适合无需自动监听登录状态的场景） #

直接在登录成功后调用setUser将用户信息存入状态：

import React, { useState } from 'react'
import styled from 'styled-components'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faGoogle} from '@fortawesome/free-brands-svg-icons'
import { faHeart } from '@fortawesome/free-solid-svg-icons'
import { auth, provider, signInWithPopup } from '../firebase'

const Login = () => {
  const [user, setUser] = useState(null) // 初始值设为null更便于判断登录状态

  const googleSignIn = async() =>{
    try {
      const result = await signInWithPopup(auth, provider)
      // 调用setUser更新组件状态
      setUser(result.user)
      console.log('登录成功：', result.user)
    } catch (error) {
      // 捕获并处理登录错误
      console.error('登录失败：', error)
    }
  }

  return (
        <div className="loginWrapper">
        <h1 className='title'>Monkey With The <br/> IMS.</h1>
        {/* 未登录时显示登录按钮，已登录时显示欢迎信息 */}
        {!user && <button className="loginButton" onClick={googleSignIn} >Sign in With  <FontAwesomeIcon icon={faGoogle} /> </button>}
        {user && <p>欢迎回来，{user.displayName}</p>}
        <p>Made with <FontAwesomeIcon icon={faHeart} style={{color: 'black'}} />, by Het Patel</p>
        </div>
  )
}

export default Login

关键修改： #

• 删除冗余的tempUser变量、useAuthState和useEffect
• 在googleSignIn中调用setUser(result.user)更新状态
• 增加错误捕获逻辑，避免登录失败导致程序崩溃
• 将React元素的class属性改为className（React规范要求）

方案二：利用useAuthState自动监听认证状态（更推荐） #

react-firebase-hooks的useAuthState会自动同步Firebase的认证状态，无需手动调用setUser：

import React from 'react'
import styled from 'styled-components'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faGoogle} from '@fortawesome/free-brands-svg-icons'
import { faHeart } from '@fortawesome/free-solid-svg-icons'
import { auth, provider, signInWithPopup } from '../firebase'
import { useAuthState } from 'react-firebase-hooks/auth'

const Login = () => {
  // useAuthState返回当前用户对象和加载状态
  const [user, loading] = useAuthState(auth)

  const googleSignIn = async() =>{
    try {
      await signInWithPopup(auth, provider)
      // 无需手动更新状态，useAuthState会自动同步
    } catch (error) {
      console.error('登录失败：', error)
    }
  }

  // 处理加载状态，避免页面闪烁
  if (loading) {
    return <div>加载中...</div>
  }

  return (
        <div className="loginWrapper">
        <h1 className='title'>Monkey With The <br/> IMS.</h1>
        {!user ? (
          <button className="loginButton" onClick={googleSignIn} >Sign in With  <FontAwesomeIcon icon={faGoogle} /> </button>
        ) : (
          <p>欢迎回来，{user.displayName}</p>
        )}
        <p>Made with <FontAwesomeIcon icon={faHeart} style={{color: 'black'}} />, by Het Patel</p>
        </div>
  )
}

export default Login

关键修改： #

• 删除自定义useState(user)，直接使用useAuthState提供的user状态
• 登录成功后无需手动更新状态，useAuthState自动同步认证变化
• 增加加载状态处理，提升用户体验

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