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

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在集合用户中创建文档，因此您可以直接访问集合（"用户"）. doc（authUser.uid）而不是执行查询

以下是我将如何修改你的例子，不确定这是否是最好的方法，我在等待其他人的评论:

const AuthContext = React.createContext();

function AuthProvider({ children }) {
    const [authUser, setAuthUser] = React.useState(undefined);

    React.useEffect(() => {
        return firebase.auth().onAuthStateChanged(user => setAuthUser(user));
    }, []);

    return <AuthContext.Provider value={authUser}>{children}</AuthContext.Provider>;
}

const UserDataContext = React.createContext();

function UserDataProvider({ children }) {
    const [userData, setUserData] = React.useState(null);
    const authUser = React.useContext(AuthContext);

    React.useEffect(() => {
        if (!authUser) return;
        const query = firebase.firestore().collection("/users").where("userId", "==", authUser.uid);
        return query.onSnapshot(snapshot => setUserData(snapshot.empty ? null : snapshot.docs[0].data()));
    }, [authUser]);

    return <UserDataContext.Provider value={userData}>{children}</UserDataContext.Provider>;
}

export default function App() {
    return (
        <AuthProvider>
            <UserDataProvider>
                {/* ... other components */}
                <MyComponent />
            </UserDataProvider>
        </AuthProvider>
    );
}

function MyComponent() {
    const authUser = React.useContext(AuthContext);
    const userData = React.useContext(UserDataContext);
    if (authUser === undefined) return <div>loading user authentication...</div>;
    if (authUser === null) return <div>logged out</div>;
    return <div>User data: {JSON.stringify(userData)}</div>;
}

在身份验证状态更改或用户数据更改时，组件仍将重新呈现，但仅在需要时呈现。