带有 React 的 Firebase - 无法从数据库中删除项目

Question

下面是我的App.js组件-

import { useEffect, useState } from 'react'
import Cart from './Cart'
import Navbar from './Navbar'
import firebase from './firebase'

function App() {

    const [products, setProducts] = useState([])
    

   useEffect(()=>{
    const ref = firebase.firestore().collection('products');
    ref.onSnapshot((snapshot) => {
      const items = [];
      snapshot.forEach((doc) =>{
        const data = doc.data();
        items.push(data)
        data['id'] = doc.id
        
      })
      setProducts(items);

    })

   },[]);

    const handleIncreaseQuantity = (product) =>{
          const index = products.indexOf(product)
          products[index].qty += 1; 
          setProducts([...products])
    }

    const handleDecreaseQuantity = (product) =>{
      const index = products.indexOf(product)

      if(products[index].qty > 0){
          products[index].qty -= 1; 
          setProducts([...products])
      }
      
    }

    const handleDeleteQuantity = (product) =>{
        // const productId = product.id
        // const newProducts = products.filter((item) => (item.id !== productId))
        // setProducts([...newProducts])
        // console.log(newProducts)
        // console.log(product.prototype)
        
        firebase.firestore().collection('products').doc(product.id).remove()
          
          console.log(`product id: ${product.id}`)
    }

    const getCartCount = () =>{
      var count = 0;

      products.forEach((item) => ( 
        count += item.qty
      ))

      return count;
    }

    const getCartTotal = () =>{

      var count = 0;
      products.map((product) =>(
        count += product.qty*product.price
        ))
        return count;
    }

  return (
    <div className="App">
      <Navbar count = {getCartCount()}/>
      <Cart 
          products = {products}
          onIncreaseQty = {handleIncreaseQuantity}
          onDecreaseQty = {handleDecreaseQuantity}
          onDeleteQty = {handleDeleteQuantity}
      />
      <div className="cart-total">
        TOTAL: {getCartTotal()}
      </div>
    </div>
  );
}

export default App;

我希望我的应用程序以这样一种方式运行：每当我单击删除图标（请参阅最后的图像）时，该项目就会从数据库中删除。我只是不知道该怎么做。我正在使用 .remove()（请参阅 handleDeleteQuantity() 函数）但它抛出一个错误，指出 .remove 不是一个函数。或者我可能不知道 handleDeleteQuantity() 中删除项目的具体代码。

Answer 1

.remove() 方法用于从 realtime database. Firestore's documentation 中删除数据说，“要删除文档，请使用 delete() 方法。” 还有尝试在异步函数中等待该方法或使用 .then 和 .catch.

处理承诺

const handleDeleteQuantity = (product) => {
  firebase.firestore().collection('products').doc(product.id).delete().then(() => {
    console.log(`product id: ${product.id}`)
  }).catch((e) => console.log(e))
}

Deleting a document does not delete its subcollections!

带有 React 的 Firebase - 无法从数据库中删除项目

Firebase with React - unable to delete items from the database

crud

firebase

reactjs

google-cloud-firestore