React Firebase 删除错误的文档 ID

Question

我一直在尝试使用 Reactjs 对 firebase 数据库进行删除操作。我的函数从 firebase 获取错误的 id 时出现错误。

我有一个按钮，它调用一个 handleOpen 函数来打开一个模态。

模态操作：

// Grabs the right id
const [open, setOpen] = useState(false);
  const handleOpen = (id) => {
    console.log(id); 
    setOpen(true);
  };
  const handleClose = () => setOpen(false); 

我有一个按钮，它调用 handleDelete 函数，该函数获取文档 ID 引用并删除文档引用。

handleDelete 函数：

const handleDelete = (id) => {
    const docRef = projectFirestore.collection("News").doc(id);
    docRef.delete();
    console.log("Deleted post data from id: " + id);
    handleClose();
  };

问题

据我观察，handleDelete 函数从帖子映射数组中获取最后一个 id，它不会将当前文档的 id 传递给模态。

只有当我在模态中传递函数时才会出现问题。当我在模态之外传递函数时，它工作得很好。

目标

获取文档 id，将其传递给 modal 并删除相应的文档。

这是完整的代码：

import React, { useState } from "react";
import { projectFirestore } from "../../../../firebase/config";
import { useCollectionData } from "react-firebase-hooks/firestore";
import Layout from "../../../../hoc/Layout/Layout";
import { Link } from "react-router-dom";
import { Button, Box, Modal } from "@mui/material";

const DeletePost = () => {
  const docRef = projectFirestore.collection("News");
  const query = docRef.orderBy("createdAt", "desc");
  const [posts] = useCollectionData(query, { idField: "id" });

  // Modal operations
  const [open, setOpen] = useState(false);
  const handleOpen = (id) => {
    setOpen(true);
  };
  const handleClose = () => setOpen(false);

  const handleDelete = (id) => {
    const docRef = projectFirestore.collection("News").doc(id);
    docRef.delete();
    console.log("Deleted post data from id: " + id);
    handleClose();
  };
  return (
    <Layout>
      <ul>
        {posts &&
          posts.map((post) => {
            const data = post.createdAt.toDate();
            const day = data.getUTCDate();
            const month = data.getUTCMonth();
            const year = data.getUTCFullYear();
            return (
              <li key={post.id}>
                <div>
                  <h3>{post.id}</h3>
                  <img
                    src={post.url}
                    alt={post.title}
                  />
                  <p>
                    <b>
                      {day}/{month}/{year}
                    </b>{" "}
                    {post.description}
                  </p>
                </div>
                <div>
                  <Link to="/edit-post">
                    <Button>
                      Edit Post
                    </Button>
                  </Link>
                  <Button onClick={() => handleOpen()}>
                    Delete Post
                  </Button>
                  <Modal
                    open={open}
                    onClose={handleClose}
                    aria-labelledby="Delete"
                    aria-describedby="Delete Post"
                  >
                    <Box>
                      <div>
                        <h4>
                          Are you sure you want to delete {post.title}?
                        </h4>
                      </div>

                      <div>
                        <Button
                          onClick={() => {
                            debugger;
                            handleDelete(post.id);
                          }}
                        >
                          Yes
                        </Button>
                        <Button onClick={handleClose}>
                          No
                        </Button>
                      </div>
                    </Box>
                  </Modal>
                </div>
              </li>
            );
          })}
      </ul>
    </Layout>
  );
};

export default DeletePost;

Answer 1

您可以定义一个状态变量来跟踪当前正在编辑的 ID：

const [selectedId, setSelectedId] = useState(-1);

然后编辑您的 handleOpen 和 handleClose 函数：

  const handleOpen = (id) => {
    setSelectedId(id);
    setOpen(true);
  };

  const handleClose = () => {
    setSelectedId(-1);
    setOpen(false);
  };

在handleDelete函数中，如果选择了一个ID，删除那个：

  const handleDelete = (id) => {
    const docRef = projectFirestore.collection('News').doc(selectedId !== -1 ? selectedId : id);
    docRef.delete();
    console.log('Deleted post data from id: ' + id);
    handleClose();
  };

最后，您需要通过添加 id 参数来更新 JSX 中的 handleOpen 方法：

<Button onClick={() => handleOpen(post.id)}>
    Delete Post
</Button>