我无法从我的 firebase firestore 数据库中删除单个文档答案

【问题标题】：I am having trouble to delete individual document from my firebase firestore database我无法从我的 firebase firestore 数据库中删除单个文档
【发布时间】：2020-10-08 03:08:07
【问题描述】：

我创建了一个反应应用程序，其中列出了书名和作者姓名。数据存储在 firebase firestore 数据库中，并与前端的应用程序同步。我遇到的问题是从集合中删除单个文档。我可以访问该 ID，但无法挑出要删除的特定 ID。我将代码放在下面，希望有人可以帮助我展示我应该如何删除单个文档，此时它会删除所有文档。谢谢！

import React, {useState, useEffect} from 'react'
import firebase from '../config/fbConfig'


const useBooks = () => {
    const [books, setBooks] = useState([])
     useEffect(() => {
        firebase.firestore().collection('books').onSnapshot((snapshot) => {
            const newBooks =  snapshot.docs.map(doc => ({
                 id: doc.id,
                ...doc.data()
              }))
            setBooks(newBooks)
        })
    },[])
    return books
}

const handleOnClick = () => { 
    const db = firebase.firestore()
    db.collection('books').get().then(snapshot => {
        snapshot.docs.forEach(doc => {
            const id = doc.id
            db.collection('books').doc(id).delete() 
            console.log("Jampa thinlay Book ID:", id)
        }) 

    })     
}

const BookList = () => {
    const books = useBooks()
    console.log('jt books', books)
    return(
        <div className="book_list">
            <ul>
                {
                    books.map(book => 
                         <li key={book.id} onClick={()=> handleOnClick()} >
                            <div className="title">id:{book.id}</div>
                            <div className="cross" > X </div>
                            <div className="title">book:{book.title.title}</div>
                            <div className="author">author: {book.author.author}</div>
                         </li>      
                    )
                } 
            </ul>
        </div>
    )
}
export default BookList

【问题讨论】：

标签： reactjs firebase google-cloud-firestore

【解决方案1】：

问题是在你的函数中

const handleOnClick = () => { 
    const db = firebase.firestore()
    db.collection('books').get().then(snapshot => {
        snapshot.docs.forEach(doc => {
            const id = doc.id
            db.collection('books').doc(id).delete() 
            console.log("Jampa thinlay Book ID:", id)
        }) 

    })     
}

您正在循环所有文档，并在每个文档上调用 delete，然后您的问题就会发生。

对此的解决方案是更改 handleOnClick 函数的签名以接收要删除的项目的 ID，就像这样

const handleOnClick = (documentId) => { 
    const db = firebase.firestore();

    db.collection("books").doc(documentId).delete()
           .then(() => {
             console.log("item with id" + documentId + "got deleted");
            }).catch((e) => console.log(e));   
}

新函数的不同之处在于它接收您要删除的文档的id，并且只删除该文档，

并且在您的 html 中，您可以按如下方式传递每本书的 id

const BookList = () => {
    const books = useBooks()
    console.log('jt books', books)
    return(
        <div className="book_list">
            <ul>
                {
                    books.map(book => 
                         <li key={book.id} onClick={()=> handleOnClick(book.id)} > // <-----------------
                            <div className="title">id:{book.id}</div>
                            <div className="cross" > X </div>
                            <div className="title">book:{book.title.title}</div>
                            <div className="author">author: {book.author.author}</div>
                         </li>      
                    )
                } 
            </ul>
        </div>
    )
}

【讨论】：