登录时从用户集合中获取用户数据

Question

我目前正在开发一个在客户端初始化了 firebase 的应用程序。当用户通过 firebase 登录时，我想从 firestore 获取用户的数据。我目前正在onAuthStateChanged侦听器中执行此操作并成功获取用户。我想知道这是否是获取用户数据的最佳方式。我的代码如下：

  const [currentUser, setCurrentUser] = useState(null)

  const [authState, setAuthState] = useState(false)

  useEffect(() => {

    console.log('state unknown')

    setAuthState(false)

    auth().onAuthStateChanged(user => {

      if (!user) {

        return

      }

      const sourceRef = firestore()

        .collection('users')

        .where('userId', '==', user.uid)

      sourceRef

        .get()

        .then(snapshot => {

          if (snapshot.empty) {

            console.log('user not found')

          } else {

            let data = {}

            snapshot.forEach(item => (data = item.data()))

            console.log(data)

            setCurrentUser(data)

            setAuthState(true)

          }

        })

        .catch(error => console.log(error.code))

    })

  }, [])

  return (

    <AppContext.Provider value={{ currentUser, authState }}>

      {children}

    </AppContext.Provider>

  )

}

我主要担心的是每次刷新应用程序时都会获取用户的数据。任何有关此事的建议或最佳实践将不胜感激

Answer 1

恕我直言，您使用上下文 API 和身份验证观察者的方法已经很好，只有一些小问题：你应该取消订阅你的观察者，正如 Awran5 提到的那样您可以观察用户数据，而不是只获取一次您可以将上下文分开以提高可读性和性能您可以使用所有者的 id 在集合 users 中创建文档，这样您就可以直接访问collection("users").doc(authUser.uid)而不是进行查询这是我修改您的示例的方法，不确定这是否是最好的方法，我正在等待其他人的评论：const AuthContext = React.createContext();function AuthProvider({ children }) {&nbsp; &nbsp; const [authUser, setAuthUser] = React.useState(undefined);&nbsp; &nbsp; React.useEffect(() => {&nbsp; &nbsp; &nbsp; &nbsp; return firebase.auth().onAuthStateChanged(user => setAuthUser(user));&nbsp; &nbsp; }, []);&nbsp; &nbsp; return <AuthContext.Provider value={authUser}>{children}</AuthContext.Provider>;}const UserDataContext = React.createContext();function UserDataProvider({ children }) {&nbsp; &nbsp; const [userData, setUserData] = React.useState(null);&nbsp; &nbsp; const authUser = React.useContext(AuthContext);&nbsp; &nbsp; React.useEffect(() => {&nbsp; &nbsp; &nbsp; &nbsp; if (!authUser) return;&nbsp; &nbsp; &nbsp; &nbsp; const query = firebase.firestore().collection("/users").where("userId", "==", authUser.uid);&nbsp; &nbsp; &nbsp; &nbsp; return query.onSnapshot(snapshot => setUserData(snapshot.empty ? null : snapshot.docs[0].data()));&nbsp; &nbsp; }, [authUser]);&nbsp; &nbsp; return <UserDataContext.Provider value={userData}>{children}</UserDataContext.Provider>;}export default function App() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <AuthProvider>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <UserDataProvider>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {/* ... other components */}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <MyComponent />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </UserDataProvider>&nbsp; &nbsp; &nbsp; &nbsp; </AuthProvider>&nbsp; &nbsp; );}function MyComponent() {&nbsp; &nbsp; const authUser = React.useContext(AuthContext);&nbsp; &nbsp; const userData = React.useContext(UserDataContext);&nbsp; &nbsp; if (authUser === undefined) return <div>loading user authentication...</div>;&nbsp; &nbsp; if (authUser === null) return <div>logged out</div>;&nbsp; &nbsp; return <div>User data: {JSON.stringify(userData)}</div>;}您的组件仍将在身份验证状态更改或用户数据更改时重新呈现，但仅在需要时重新呈现。