我如何更改 firebase 上快照中的數據

Question

在我的項目中，我創建了一個 function 以從 firebase 獲取數據然后返回它，但我總是得到一個空數組，我的 function 下面

export const pullDataFromFirebase = (collectionName, reducerName) => {
let data = []
    onSnapshot(collection(db, collectionName), (snapshot) => {
        snapshot.docs.map((doc)=>{
            data.push(doc.data())
        })
    })
return data
}

Answer 1

您不能將承諾與 Firestore 實時更新混合使用。 返回 promise 的函數（ async函數）旨在異步返回單個結果。 onSnapshot不會返回 promise。相反，只要查詢結果發生變化，它就會調用提供的回調。

如果您只想從 Firestore 獲取數據，您可以改為這樣做：

export const pullDataFromFirebase = async (collectionName, reducerName) => {
  const q = query(collection(db, collectionName));
  const querySnapshot = await getDocs(q);
  const documents = querySnapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() }));

  return documents;
}

要訪問它，您必須調用異步 function 並使用.then方法。 請參閱下面的代碼：

pullDataFromFirebase(collectionName)
.then((data) => {
  console.log(data);
});

要收聽快照之間的變化，您可以使用這些文檔中的示例代碼：

export const pullDataFromFirebase = async (collectionName, reducerName) => {
      onSnapshot(collection(db, collectionName), (snapshot) => {
        snapshot.docChanges().forEach((change) => {
          if (change.type === "added") {
              console.log("Added", change.doc.id, change.doc.data());
              //call a function.
          }
          if (change.type === "modified") {
              console.log("Modified", change.doc.id, change.doc.data());
              //call an function.
          }
          if (change.type === "removed") {
              console.log("Removed", change.doc.id, change.doc.data());
              //call a function
          }
        });
      });
}

如果願意，您也可以使用React Hooks 。 通過使用useState()和useEffect() 。 請參閱下面的代碼：

  const [data, setData] = useState([]);

  async function pullDataFromFirebase(collectionName, reducerName) {
    const colRef = query(collection(db, collectionName))
    onSnapshot(colRef, (snapshot) => {
      setData(snapshot.docs.map(doc => ({
        doc.data()
      })))
    })
  }

  useEffect(() => {
    pullDataFromFirebase();
  },[])

上面的代碼將能夠將您的文檔數據設置為 state，並能夠在另一個 function 上使用它。