如何通过反应从集合中删除/编辑 Firestore 文档

Question

所以我有一个使用 Firebase Firestore 和 React 的简单 CRUD 应用程序，并且我有一堆集合。在每个集合中，我都有带有图像的图像对象。 我找不到删除或编辑这些图像的方法。 目前，我可以通过该集合获取并显示图像。

这是我的代码。我想在 .

中添加删除和编辑按钮

请帮忙...

import React, { useState, useEffect } from "react";
import { useRouteMatch, Link } from "react-router-dom";
import { NewPhoto } from "./NewPhoto";
import { app } from "./base";

const db = app.firestore();

export const Album = () => {
  const [images, setImages] = useState([]);
  const [albumName, setAlbumName] = useState("");

  const match = useRouteMatch("/:album");
  const { album } = match.params;

  useEffect(() => {
    const unmount = db.collection("albums")
      .doc(album)
      .onSnapshot((doc) => {
        setImages(doc.data().images || []);
        setAlbumName(doc.data().name);
      });
      return unmount
  }, []);

  return (
    <>
      <section>
        <header>
          <h1>{albumName}</h1>
          <p>Go to the <Link to="/">Home page</Link></p>
        </header>
        {images.map((image) => (
          <aside key={image.name}>
            <img src={image.url} alt="album" />
          </aside>
        ))}
      </section>
      <footer>
        <NewPhoto currentAlbum={album} />
      </footer>
    </>
  );
};

Answer 1

我不确定您要达到的目标或文档的外观，您的 url 图像是文档中的字符串还是存储在 firebase 存储中。

删除文档相对简单，只要您有文档参考，see these guides 说明如何删除文档，或者如果您想删除文档中的字段see these guides。如果您想从存储中删除图像，请查看this doc。

或者，如果您只想更新该字符串，您可以使用these docs 来指导您

要在按钮下将该功能添加到您的代码中，您可以执行this post 中详述的操作

也许这样的东西对你有用；

import React, { useState, useEffect, useCallback } from "react";
import { useRouteMatch, Link } from "react-router-dom";
import { NewPhoto } from "./NewPhoto";
import { app } from "./base";

const db = app.firestore();

export const Album = () => {
  const [images, setImages] = useState([]);
  const [albumName, setAlbumName] = useState("");
  const [isSending, setSending] = useState(false);

  const match = useRouteMatch("/:album");
  const { album } = match.params;

  const deleteDoc =  useCallback((indexToRemove) => {
    setSending(true);
    db.collection("albums")
      .doc(album)
      .update('images', Firestore.FieldValue.arrayRemove(indexToRemove))
   .then (()=>{
      setSending(false);
      console.log("Album deleted");   
    });
   .catch (error => {
      setSending(false);
      console.log(error);
    });

  },[])

  useEffect(() => {
    const unmount = db.collection("albums")
      .doc(album)
      .onSnapshot((doc) => {
        setImages(doc.data().images || []);
        setAlbumName(doc.data().name);
      });
      return unmount
  }, []);

  return (
    <>
      <section>
        <header>
          <h1>{albumName}</h1>
          <p>Go to the <Link to="/">Home page</Link></p>
        </header>
        {images.map((image, index) => (
          <aside key={image.name}>
            <img src={image.url} alt="album" />
          </aside>
        ))}
      <input type="button" disabled={isSending} onClick={deleteDoc(index)} />
      </section>
      <footer>
        <NewPhoto currentAlbum={album} />
      </footer>
    </>
  );
};