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

Question

我创建了一个小型的反应应用程序，您可以输入书名和作者姓名，它会在表单下方显示列表，也存储在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

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 所说的那样。