前往
大廳
主題

【React + Firebase筆記】add/set/update/get、batch上傳、document.count、用Async、UseEffect等待firebase資料

%%鼠 拒收病婿 | 2021-09-24 21:42:02 | 巴幣 132 | 人氣 498

前言:
學好玩的。

前置:了解React Hook比較好懂。


忘了補定義:db跟firestore= firebase.firestore();

Get:
範例:
取得的值是資料庫快照(snapshot),意指就像瞬間拍照印下來一樣不能更改,資料庫那個瞬間的狀態。

Update:
範例:


Add:
追加新的資料並創建文件id,因此上傳不需要提供id。
Set:
set會將資料加進目標文件,若文件不存在則自動創建。
update會更新文件內容,文件不存在則無效。

batch上傳、文件計數器:
批量上傳。先將上傳動作存在一個batch裡,執行batch.commit()一次執行,若有其中一個失敗則全體無效。

firebase並沒有提供取得文件數量的API,全部get下來再算數量的作法不適合處理數量大的資料。
所以我們在合集裡加個計數器文件,資料新增、刪除時同步操作計數器,並使用batch上傳確保新增/刪除的操作與計數器同步,不會有商品新增失敗卻仍操作計數器的問題。


*備:倒數第二行打錯了,因該是「batch.update(statsRef,{count:increment});」而不是set,set只會一直設成1。或使用set {merge: true} (參考)

用Async方法等待取得資料:
大概是C#寫久了,到了網頁前端也會想寫幫特定方法群寫成涵式庫。
假設我想在首頁列出商品清單,我可以讓方法先回傳Promise物件,給首頁去等待:
找不到之前看到的文章,說Promise底層也是使用Async技術,只是多了其他方法參數可以使用。



後記:
愉快常樂,謝謝大家
送禮物贊助創作者 !
0
留言

創作回應

多古尼爾拉布拉布拉格
佬不愧是佬 窩都不會嗚嗚
2021-09-25 01:03:23
KK
平安喜樂,謝謝分享。[e12]
2021-09-25 16:51:31
追蹤 創作集

作者相關創作

更多創作