如何在React + Firebase项目中编辑/删除博客文章内容

Hey there! Since you’ve built similar features with Express and Rails before, you’ll pick this up smoothly—Firebase just handles backend operations a bit differently (no REST routes to define, just direct Firestore calls). Let’s break this down step by step.

First: Firestore Setup (Assuming You’re Using Firestore for Posts) #

Make sure your posts live in a Firestore collection (let’s call it posts), each with a unique document ID. A typical post document might look like this:

{
  title: "My First React + Firebase Post",
  content: "Lorem ipsum dolor sit amet...",
  createdAt: firebase.firestore.Timestamp.fromDate(new Date()),
  authorId: "your-user-uid"
}

1. Delete Functionality #

This is straightforward—you just need to call Firestore’s delete() method on the specific post document.

In Your React Component: #

First, import the necessary Firestore utilities (assuming you already initialized Firebase in your app):

import { getFirestore, doc, deleteDoc } from "firebase/firestore";

Then create a delete handler inside your component:

const handleDelete = async (postId) => {
  const db = getFirestore();
  try {
    await deleteDoc(doc(db, "posts", postId));
    // Update local state to remove the deleted post (instant UI update)
    setPosts(prevPosts => prevPosts.filter(post => post.id !== postId));
    alert("Post deleted successfully!");
  } catch (error) {
    console.error("Error deleting post: ", error);
    alert("Oops, failed to delete that post.");
  }
};

Add a delete button to your post list or detail view:

<button onClick={() => handleDelete(post.id)} className="delete-btn">Delete Post</button>

2. Edit Functionality #

This involves fetching existing post data, populating an edit form, then updating the Firestore document.

Step 1: Build a Reusable Edit/Create Form #

You can repurpose a create form for edits by passing in existing post data to pre-fill fields:

const PostForm = ({ postToEdit, onSubmit }) => {
  const [title, setTitle] = useState(postToEdit ? postToEdit.title : "");
  const [content, setContent] = useState(postToEdit ? postToEdit.content : "");

  const handleSubmit = async (e) => {
    e.preventDefault();
    await onSubmit({ title, content });
    // Reset form after submission
    setTitle("");
    setContent("");
  };

  return (
    <form onSubmit={handleSubmit} className="post-form">
      <input
        type="text"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        placeholder="Post Title"
        required
      />
      <textarea
        value={content}
        onChange={(e) => setContent(e.target.value)}
        placeholder="Write your post content here..."
        rows="8"
        required
      />
      <button type="submit">{postToEdit ? "Update Post" : "Create Post"}</button>
    </form>
  );
};

Step 2: Add the Update Logic to Your Parent Component #

Import Firestore’s update method:

import { getFirestore, doc, updateDoc } from "firebase/firestore";

Create an update handler:

const handleUpdate = async (postData) => {
  const db = getFirestore();
  try {
    // Update the Firestore document
    await updateDoc(doc(db, "posts", postToEdit.id), {
      title: postData.title,
      content: postData.content,
      updatedAt: firebase.firestore.Timestamp.fromDate(new Date()) // Optional: Track last update time
    });
    // Refresh local state to show the updated post
    setPosts(prevPosts => prevPosts.map(post => 
      post.id === postToEdit.id ? {...post, ...postData, updatedAt: new Date()} : post
    ));
    // Close the edit form
    setPostToEdit(null);
    alert("Post updated successfully!");
  } catch (error) {
    console.error("Error updating post: ", error);
    alert("Failed to update the post.");
  }
};

Step 3: Trigger the Edit Form #

Add an edit button to your post list that sets the postToEdit state:

<button onClick={() => setPostToEdit(post)} className="edit-btn">Edit Post</button>

Render the form when postToEdit is not null:

{postToEdit && <PostForm postToEdit={postToEdit} onSubmit={handleUpdate} />}

Key Differences from Express/Rails to Keep in Mind #

• No REST routes to define: Instead of building PUT /posts/:id or DELETE /posts/:id endpoints, you call Firestore’s CRUD methods directly from your React components.
• Immediate UI updates: After editing/deleting, you update your React state directly (no need to refetch data from a server, though you can set up real-time listeners if you want).
• Security rules replace server-side auth checks: Use Firestore security rules to ensure only authorized users can edit/delete posts (see example below).

Quick Security Rule Example #

Make sure to lock down your Firestore collection to prevent unauthorized edits/deletes:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /posts/{postId} {
      allow update, delete: if request.auth != null && request.auth.uid == resource.data.authorId;
      allow read: if true;
      allow create: if request.auth != null;
    }
  }
}

内容的提问来源于stack exchange，提问作者Al-m