时间戳

首页 > 解决方案 > 在firebase中添加一个集合文档长度的计数器

reactjs - 在firebase中添加一个集合文档长度的计数器

问题描述

我正在开发一个电子商务，我在前端使用 react，在后端使用 firebase/firestore。我设法添加/删除产品，并将它们存储在属于每个用户的集合中。我想要做的是在导航栏和其他组件中有一个计数器，它指示登录用户在购物篮中的文档（产品）数量，但由于范围，我无法做到.

在 products.js 中

    const addToBasket = () => {
        db.collection('users').doc(user?.uid).collection('basket').add({productId: id, title: title, 
        cont: content, img: image, price: price})
    }

在 checkoutProduct.js 中

    const removeFromBasket = () => {          
     firestore().collection('users').doc(user?.uid).collection('basket').doc(id.toString()).delete();
    }

在 checkout.js 中

    useEffect(() => {
    if(user){
        firestore().collection('users').doc(user?.uid).collection('basket').get().then(snapshot => {
            setProducts(snapshot.docs.map((doc) => {return {...doc.data(), id: doc.id} }))
        })    
    }
    }, [])

标签： reactjsfirebasegoogle-cloud-firestore

解决方案

这是需要在前端处理的常见事情。一种解决方案是将信息存储在上下文中。

https://reactjs.org/docs/hooks-reference.html#usecontext

从概念上讲，您可以做的一件事是在成功写入数据库时​​更新该上下文，在您的情况下为 Firestore。

因此，通过这种方式，您可以在后端更新时更新前端。这可以通过快照上的观察者来完成。

阅读：https ://firebase.google.com/docs/firestore/query-data/listen

推荐阅读