第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

登錄時(shí)從用戶集合中獲取用戶數(shù)據(jù)

登錄時(shí)從用戶集合中獲取用戶數(shù)據(jù)

我目前正在開(kāi)發(fā)一個(gè)在客戶端初始化了 firebase 的應(yīng)用程序。當(dāng)用戶通過(guò) firebase 登錄時(shí)，我想從 firestore 獲取用戶的數(shù)據(jù)。我目前正在onAuthStateChanged偵聽(tīng)器中執(zhí)行此操作并成功獲取用戶。我想知道這是否是獲取用戶數(shù)據(jù)的最佳方式。我的代碼如下：  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>  )}我主要擔(dān)心的是每次刷新應(yīng)用程序時(shí)都會(huì)獲取用戶的數(shù)據(jù)。任何有關(guān)此事的建議或最佳實(shí)踐將不勝感激
查看完整描述

1 回答

?
忽然笑

TA貢獻(xiàn)1806條經(jīng)驗(yàn) 獲得超5個(gè)贊

恕我直言，您使用上下文 API 和身份驗(yàn)證觀察者的方法已經(jīng)很好，只有一些小問(wèn)題：

  • 你應(yīng)該取消訂閱你的觀察者，正如 Awran5 提到的那樣

  • 您可以觀察用戶數(shù)據(jù)，而不是只獲取一次

  • 您可以將上下文分開(kāi)以提高可讀性和性能

  • 您可以使用所有者的 id 在集合 users 中創(chuàng)建文檔，這樣您就可以直接訪問(wèn)collection("users").doc(authUser.uid)而不是進(jìn)行查詢

這是我修改您的示例的方法，不確定這是否是最好的方法，我正在等待其他人的評(píng)論：

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>;

}

您的組件仍將在身份驗(yàn)證狀態(tài)更改或用戶數(shù)據(jù)更改時(shí)重新呈現(xiàn)，但僅在需要時(shí)重新呈現(xiàn)。


查看完整回答
反對(duì) 回復(fù) 2023-08-18
  • 1 回答
  • 0 關(guān)注
  • 134 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)