空购物车，firebase-firestore react-hooks

Question

我正在用Firestore开发一个电子商务应用程序。当用户删除项目或添加项目时，它会正确呈现。但是当我试图清空整个购物车(删除文档)时，如果不刷新就无法渲染。可能是关于被删除的单据，没有单据导致函数查不到单据？如果是这样，这里的最佳实践解决方案是什么？

代码如下：

import React, { useState, useEffect } from 'react'
    import firebase from 'firebase';
    import { useAuth, useStoreUpdate } from '../contexts/FirebaseContext';
    import { Link, useHistory } from 'react-router-dom';
    import 'react-responsive-modal/styles.css';
    import { Modal } from 'react-responsive-modal';
    
    
    export default function Cart() {
        const [userMail, setUserMail] = useState(undefined)
        const [userCart, setUserCart] = useState(undefined)
        const [totalAmmout, setTotalAmmout] = useState(0)
        const user = useAuth()
        const userDoc = firebase.firestore().collection("cart").doc(userMail)
        const updateStore = useStoreUpdate()
        const [open, setOpen] = useState(false);
        const onOpenModal = () => setOpen(true);
        const onCloseModal = () => setOpen(false);
        const history = useHistory()
    
    
        const emptyCart = async () => {
            await userDoc.delete()
            await updateCart()
            await console.log('ksaljdklasd');
            await updateStore()
            await console.log('dasdsad');
        }
    
        const updateCart = () => {
            userDoc.get().then((doc) => {
                if (doc.exists) {
                    let cart = doc.data()
                    setUserCart(cart)
                }
            })
        }
    
        const updateData = async () => {
            if (user.currentUser) {
                await updateCart()
    
                if (userCart) {
    
                    let totalPrice = 0;
                    await userCart.item.forEach(item => {
                        totalPrice += item.price
                    })
                    await setTotalAmmout(totalPrice)
                }
            }
        }
    
    
    
        async function removeFromCart(itemId, name, url, price, category, type, description) {
            const cartItem = { itemId, name, url, price, category, type, description }
            await userDoc.update({
                item: firebase.firestore.FieldValue.arrayRemove(cartItem)
            })
            await updateCart()
            await updateStore()
        }
    
        useEffect(() => {
            if (user.currentUser) {
                setUserMail(user.currentUser.email);
                updateStore();
            }
        }, []);
    
        useEffect(() => {
            updateData().then(
                console.log(totalAmmout)
            )
        }, userCart);
    
    
        if (!userCart) return <h1>hold</h1>
        return (
            <main className="main-cart">
                <div className="container">
                    {userCart.item && userCart.item.length >= 1 && userCart.item.map((item) => {
    
                        return (
                            < div className="item-container" key={item.itemId} >
                                <h3>{item.name}</h3>
                                <p>${item.price}</p>
                                <img height="150px" width="150px" src={item.url} alt="" />
                                <button onClick={async () => {
                                    await removeFromCart(item.itemId, item.name, item.url, item.price, item.category, item.type, item.description)
                                }}>X</button>
                            </div>
                        )
                    })}
    
                </div>
                <button className="fixed-bottom-link" onClick={onOpenModal}>finish</button>
                <Modal showCloseIcon={true} open={open} onClose={onCloseModal} center>
                    <div className="modal-container">
                        <div>
                            {userCart &&
                                userCart.item.map(item => {
                                    return (
                                        <li>{item.name} <span className="strong">{'|$' + item.price}</span></li>
                                    )
                                })
                            }
                            {totalAmmout &&
    
                                <h3>total price: ${totalAmmout}</h3>
                            }
                        </div>
                        <button onClick={emptyCart}>Click to Pay</button>
                    </div>
                </Modal>
            </main >
        )
    }

Answer 1

只需重置文档：

befor : 

 const emptyCart = async () => {
            await userDoc.delete()
            await updateCart()
            await updateStore()
        }

after : 


 const emptyCart = async () => {
        const userDoc = await firebase.firestore().collection("cart").doc(userMail)
        await userDoc.delete()
        await userDoc.set({
            item: firebase.firestore.FieldValue.arrayUnion()
        })
        await updateCart()
        await updateStore()


    }