從 firebase firestore 中刪除圖像文檔

Question

我正在嘗試從 firebase firestore 集合中刪除一個文檔我該怎么做，我嘗試了一些但沒有成功這是我的代碼

這是 Firestore 掛鈎

const useFirestore = (somecollection) => {

    const [docs, setDocs] = useState([]);


    useEffect (() => {
        // new collection reference
          const newcoll = collection(projectFirestore, somecollection);
          const q = query(newcoll, orderBy('createdAt', 'desc'));
          const unsub = onSnapshot(q, (snapshot) => {
            let documents = [];
            snapshot.forEach(doc => {
               documents.push({...doc.data(), id: doc.id})
            })
            setDocs(documents);
          });
     
          return () => unsub;

    },[somecollection]);
    
    return { docs };
}

顯示所有圖像的圖像網格（只有 js 沒有 jsx 返回）

const { docs } = useFirestore('images');

  const handleDelete = (e) => {
    docs.forEach(doc => {
      deleteDoc(doc);
    })

現在，在 imagegrid jsx 上，我擁有所有上傳的圖像，這些圖像將文檔存儲在其中。

所以我為每個圖像添加了一個按鈕，我希望當我單擊該按鈕時它會觸發一個 handleDelete() 從 firestore 中刪除這個特定的圖像文檔

Answer 1

如果您嘗試使用一個按鈕來刪除單個文檔，您可能不想遍歷所有文檔並調用deleteDoc() 。

相反，您的 UI 可能會顯示每個圖像並包含每個按鈕的 ID。 就像是：

const deleteOneImageDoc = async (docId) => {
  try {
    let docRef = doc(myFirestore, `images/${docId}`);
    await deleteDoc(docRef);
  } catch (ex) {
    console.error(`Delete FAILED: ${ex.message}`);
    throw ex;
  }
};

return <div>
  docs.map((imgDoc) => {
    return (
      <div key={imgDoc.id}>
        <img src={imgDoc.url}/>
        <button onClick={() => deleteOneImageDoc(imgDoc.id)}>
          delete {imgDoc.id}
        </button>
      </div>);
    })
  </div>;