时间戳

首页 > 解决方案 > 在使用 onSnapshot 回调时，如何获得一个调用 firebase.firestore.set 的异步 React 函数来等待？

reactjs - 在使用 onSnapshot 回调时，如何获得一个调用 firebase.firestore.set 的异步 React 函数来等待？

问题描述

这是我当前代码的[简化版本]：

export const setTimestamp = async () => {
    console.log("START")
    let result = null;
    const dbRef = await firestore.collection("collectionName").doc("docName");
    const unsub = await dbRef.onSnapshot(snap => {
        result = snap.data();
        console.log("ACTUAL END", result);
    });
    await dbRef.set({ serverTime: firebase.firestore.FieldValue.serverTimestamp() });
    unsub();
    console.log("FUNCTION END", result);
    return result;
};

FUNCTION END当前已记录在我之前ACTUAL END，而我反过来需要它。有任何想法吗？是否有替代使用onSnapshot？

感谢您的阅读。

标签： reactjstypescriptasynchronousasync-awaitsnapshot

解决方案

嗯，onSnapshot是event返回Promise订阅的 a 。但该事件将在订阅后触发。如果要确保触发事件，则需要另一个Promise处理该场景的事件：

const res = await new Promise( async resolve=> {
const unsub = await dbRef.onSnapshot(snap => {
        result = snap.data();
        
        console.log("ACTUAL END", result);
        resolve({result,unsub});
    });
});

await dbRef.set({ serverTime: firebase.firestore.FieldValue.serverTimestamp() });
res.unsub();
console.log("FUNCTION END", res.result);
return res.result;

推荐阅读