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

我创建了一个小的react应用程序，你可以输入书名和作者姓名，它会在表单下方显示列表，也会存储在firebase数据库中。如果您想删除它，您可以在前端删除它，但是我在firebase数据库中删除它时遇到问题，因为我不确定如何动态引用文档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

import React，{useContext}来自“React”
从“../contents/BookContext”导入{BookContext}
从“../config/fbConfig”导入firebase
常量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（“已成功删除！”）}）
.catch（（错误）=>{console.log（“删除文档时出错：”，错误）}）
}
返回(
{

{bookProp.title}
{bookProp.author}

}
)
}
导出默认书籍详细信息

如果您有权访问图书名称，并且该名称存储在图书文档的

名称

字段中，则可以使用

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所说。
如果不知道id，则无法删除文档。您需要确保代码中有可用的id。您能建议我如何在react代码中引用正确的firebase文档id吗？当您查询文档时，您会得到包含
数据（）的对象
property保存查询数据和
id
属性，该属性提供firebase为该文档分配的uid。如果您发布查询以获取文档，我将能够向您展示如何获取uid。听起来不错，但它会抛出以下错误消息“TypeError:无法读取undefined的属性“ref”。理想情况是从ID字段中删除。当我通过以下方式添加图书标题和作者时，我能够检索到确切的ID:firebase.firestore（）.collection（'books'）.add（{title:{title}，author:{author}，}）。然后（函数（docRef）{console.log（“文档ID:，docRef.ID）；}）。catch（函数（错误）{console.error（“error:，error）}）}但不知道如何连接它来删除部分..您得到的是'TypeError'“因为您的查询与任何文档的名称字段都不匹配。请记住，查询的图书名称必须与存储的图书文档的名称字段100%匹配。这意味着如果大小写有任何差异，任何额外的空格或符号，您的查询将不匹配，您将得到“无法读取未定义的属性'ref'”。您还可以将另一个“where”查询与该查询链接起来，以匹配书籍的作者（如果有多本同名书籍），但这意味着作者的姓名也必须100%匹配。通过在创建文档时获取id，您只能在该会话中使用该id，除非您将其存储在某个位置，我想这不是你想要的。为了解决您的问题，我需要更多的用例细节，比如您如何获取书籍的细节，您是一次获取一个集合（如“books”）下的所有文档，还是一个特定用户的集合并将其显示在该用户下？如何在客户端存储图书列表？我创建了一个components文件夹，将图书和作者添加到BookForm.jsx中，并删除BookDetails.jsx文件中的图书和作者。我把它放在我的github存储库中，您可以查看它并感谢您的反馈。我不是React开发者，但我确实看过你的代码。您在哪里从Firestore检索文档？在repo中，您似乎正在使用localStorage来存储文档。如果需要，为什么不将添加到firestore时获得的firebase生成的id与uuid包生成的id一起保存呢。从firestore获取文档时，还可以将从
querySnapshot
获取的生成id以及标题和作者姓名作为一个对象数组存储在bookState中，并将每个文档的id传输到BookDetail.jsx上的handleOnClick函数，然后将其删除