如何使用 React 应用程序删除 firebase 中的文档

Question

我创建了一个小型 react 应用程序，您可以输入书名和作者姓名，它会在表单下方显示列表，它也存储在 firebase 数据库中。如果你想删除它，你可以在前端删除它，但是我在我的 firebase 数据库中删除它时遇到了麻烦，因为我不确定如何动态引用 doc id。如果我在代码中提供 id，它可以删除这个特定的 id，但用户不能在前端提供 id。希望有人帮助我，谢谢！

import React, {useContext} from 'react'
import {BookContext} from '../contexts/BookContext'
import firebase from '../config/fbConfig'

const BookDetails = ({bookProp}) => {
    const {actionDispatch} = useContext(BookContext)

    const handleOnClick = () => {
        actionDispatch({type: "REMOVE_BOOK", id: bookProp.id})


        firebase.firestore().collection('books').doc(id).delete()
        .then(()=>{console.log("successfully deleted! ")})
        .catch((error)=>{ console.log("Error removing document:", error)})
    }
    return(
        <div>
            {
                <li onClick={handleOnClick}>
                    <div className="title">{bookProp.title}</div>
                    <div className="author">{bookProp.author}</div>
                </li>
            }
        </div>
    )
    }

export default BookDetails

Answer 1

如果您有权访问图书名称，并且该名称存储在图书文档中的 name 字段中，则可以使用 where 查询来获取对图书文档的引用并将其删除。

let bookName = "War And Peace";

firebase.firestore().collection("books").where("name", "==", bookName).get()
.then(querySnapshot => {
    querySnapshot.docs[0].ref.delete();
});

querySnapshot.docs[0].ref.delete(); 语句获取与名称查询匹配的第一本（也可能是唯一一本）书籍并将其删除。

另一种方法是在获取书籍文档时获取 id 并存储它，就像 Vaibhav Joshi 说的那样。