时间戳

首页 > 解决方案 > Firebase读取与react useeffect异步不等待文档读取

reactjs - Firebase读取与react useeffect异步不等待文档读取

问题描述

我在身份验证上下文中有以下代码片段，我在上下文中设置了登录详细信息以及用户特定的详细信息。但是问题是代码退出了 useEffect 块，即使我使用异步来完成文档读取。但是代码无论如何都会通过 useEffect 并且在那之后检索用户详细信息。

我想在控制失去 useEffect 之前阅读文档。

请让我知道我做错了什么。

    useEffect(() => {
        auth.onAuthStateChanged(user => {
            let userDetails : IUser = {
                landingPage: "error",
                permissions: {
                    'none' : {
                        'read' : false,
                        'write' : false
                    }
                },
                role: "none",
                shopId: "none"
            };
            if (user) {
                console.log("Read user data now");
                (async function some() {
                    await readDocument("users", user.uid,function (result: IUser) {
                        userDetails = result;
                        console.log("Result received in ", result);
                    });
                })();
            }
            return setState({
                ...authInitialState,
                isAuthenticated: !!user,
                isInitialized: true,
                permissions: userDetails.permissions,
                user: user,
                landingPage: userDetails.landingPage
            });
        });
    }, []);

读取文档功能

function readDocument(collection: string, docId: string, callback: any) {
    console.log("Going to read:", docId);
    db.collection(collection).doc(docId)
        .get()
        .then(function (doc) {
            callback(doc.data());
            console.log("Read data", doc.id, " => ", doc.data());
        })
        .catch(function (error) {
            console.log("Failed to write", error);
        });
}

标签： reactjsfirebasegoogle-cloud-firestorereact-hooks

解决方案

为了readDocument使用它，await它需要是一个得到解决的承诺。https://itnext.io/javascript-promises-and-async-await-as-fast-as-possible-d7c8c8ff0abc - 向下滚动到 async/await 部分

像这样的东西（未经证实） -

const readDocument = function (collection: string, docId: string, callback: any) {
  return new Promise((resolve, reject) => {
    db.collection(collection).doc(docId)
        .get()
        .then(function (doc) {
            resolve(doc.data());
            console.log("Read data", doc.id, " => ", doc.data());
        })
        .catch(function (error) {
            console.log("Failed to write", error);
            reject(error);
        });
  });
};

推荐阅读