為什么 Firebase 使用 onSnapshot 返回一個空數組？

Question

我正在嘗試從 Firebase 獲取實時數據，並使用 onSnapshot 構建一個偵聽器，以便可以在我的 React Native 應用程序上顯示它。

一切正常，例如將數據提交給 FB。

但是當我試圖從 FB 獲取數據並將其顯示在我的 React Native 應用程序上時，它不起作用。

它返回一個空數組。

當我使用console.log(q)或console.log(collectionRef)時，它工作得很好。 （但當然不歸還鑰匙）

任何幫助或建議將不勝感激。

export default function Home(){
    const [caretubos, setCaretubos] = React.useState([]);
    const navigation = useNavigation();

    React.useEffect(() => {
        const collectionRef = collection(database, 'users');
        const q = query(collectionRef, orderBy('createdAt','desc'));

    const unsubscribe = onSnapshot(q, querySnapshot =>{
        console.log('querySnapshot unsubscribe');
            setCaretubos(
                querySnapshot.docs.map(doc => ({
                    id: doc.id,
                    nombre: doc.data().nombre,
                    cantidad: doc.data().cantidad,
                    pretexto: doc.data().pretexto,
                    createAt: doc.data().createAt
                }))
            );
        });
    return unsubscribe;
    },[])

    console.log(caretubos);

Answer 1

看起來，根據 onSnapshot 的文檔， onSnapshot只有在創建第一個快照后對基礎數據進行更新時才會被調用。

您可以使用 onSnapshot() 方法收聽文檔。 使用您提供的回調的初始調用會立即使用單個文檔的當前內容創建文檔快照。 然后，每次內容更改時，另一個調用會更新文檔快照。

我認識到這個文檔在解釋上是模棱兩可的，目前還不清楚立即創建快照是否意味着您的onSnapshot回調被調用，或者它是否只是意味着立即創建“比較基線”，以便在發生更新時，它們是已知，然后可以調用回調。

聽起來這意味着您的實際onSnapshot回調不會在第一次被調用，而只會在更新時被調用。 您可能還需要在效果中包含一個初始setCaretubos調用。：

React.useEffect(() => {
    const collectionRef = collection(database, 'users');
    const q = query(collectionRef, orderBy('createdAt','desc'));

    setCaretubos(q.docs.map(doc => ({
        id: doc.id,
        nombre: doc.data().nombre,
        cantidad: doc.data().cantidad,
        pretexto: doc.data().pretexto,
        createAt: doc.data().createAt
    }))

    const unsubscribe = onSnapshot(q, querySnapshot =>{
        console.log('querySnapshot unsubscribe');
        setCaretubos(
            querySnapshot.docs.map(doc => ({
                id: doc.id,
                nombre: doc.data().nombre,
                cantidad: doc.data().cantidad,
                pretexto: doc.data().pretexto,
                createAt: doc.data().createAt
            }))
        );
    });
    return unsubscribe;
},[])

此外，您的console.log(caretubos); 由於 useEffect 的異步性，底部的語句將在設置useEffect之前第一次返回一個空數組。

Answer 2

我自己修好了。 我在文件夾導入內容時遇到問題。