时间戳

首页 > 解决方案 > 如何通过反应从集合中删除/编辑 Firestore 文档

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

问题描述

所以我有一个使用 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>
    </>
  );
};

标签： javascriptreactjsfirebasegoogle-cloud-firestorereact-router

解决方案

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

只要您有文档参考，删除文档就相对简单，请参阅这些有关如何删除文档的指南，或者如果您想删除文档中的字段，请参阅这些指南。如果您想从存储中删除图像，请查看此文档。

或者，如果您只想更新该字符串，您可以使用这些文档来指导您

要在按钮下将该功能添加到您的代码中，您可以执行本文中详细介绍的操作

也许这样的事情对你有用；

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>
    </>
  );
};

推荐阅读