如何返回异步函数的数据？

Question

我似乎不知道如何返回数据，因此我可以将其用作异步函数的反应组件。我不了解如何将数据从 Promise 或异步函数获取到可以为组件调用的普通函数，因为我知道您无法从异步函数将内容返回到组件。

有人可以指导我正确的方向吗？将数据分配给 UserProfile 对象后，我想显示爱好属性。

这是我的相关代码

class UserProfile{
    constructor(hobbies) {
        this.hobbies = hobbies;
    }
}

const userProfileConverter = {
    toFirestore: (UserProfile) => {
        return {
            hobbies: UserProfile.hobbies
        }
    },
    fromFirestore: (snapshot, options) => {
        const data = snapshot.data(options);
        return new UserProfile(data.hobbies);
    }
}

export const GetUserProfile = async () => {
    return new Promise(function (resolve, reject){
        onAuthStateChanged(auth, async (user) => {
            if (user) {
                console.log('Reached this point!')
                const uid = user.uid;
                console.log('uid: ', uid);
                // const docRef = doc(db, "users", "profile", "hobbies", uid)
                const docRef = doc(db, "users", uid, "profile", "hobbies").withConverter(userProfileConverter);
                const docSnap = await getDoc(docRef);
                if (docSnap.exists()) {
                    const userProfile = docSnap.data();
                    console.log('data: ', docSnap.data());
                    console.log('User Profile obj data: ', userProfile)
                    resolve(userProfile);
                }
            } else {
                console.error('No signed in user!')
                reject('No signed in user.');
            }
        })
    })

}

const displayUserProfile = () => {
    GetUserProfile().then((userProfile) => {
        return(
            <>
                <h1>
                    {userProfile.hobbies}
                </h1>
            </>
        );
    });
}

export default displayUserProfile;

我尝试从 GetUserProfile 函数中的 onauthstatechanged 内部（我知道这是不好的做法）和从 Promise 返回，但似乎无法弄清楚如何在 Promise 或异步函数之外获取数据，这样我就可以使用它。

Answer 1

你需要等待

const displayUserProfile = async () => {
    const userProfile = await GetUserProfile();
    return(
        <>
            <h1>
                {userProfile.hobbies}
            </h1>
        </>
    );
}

Answer 2

*强文本*modImplementation“curse.maven：cc-tweaked-282001：5379174”

列出项目