在基于 React 的博客应用程序中更新和删除帖子：第 4 部分

在基于React的博客应用程序中，更新和删除帖子是两个常见的功能，在本篇回答中，我们将详细介绍如何在React应用程序中实现这两个功能。

1. 更新帖子

要更新帖子，我们需要先创建一个表单来收集用户的输入，然后将这些输入发送到服务器以更新数据库中的相应记录，以下是实现此功能的步骤：

1.1 创建更新帖子表单组件

我们需要创建一个用于更新帖子的表单组件，这个组件应该包含一个输入框，用于显示当前帖子的内容，以及一个提交按钮，用于提交更新后的内容。

import React, { useState } from 'react';
const UpdatePostForm = ({ post, onUpdate }) => {
  const [updatedContent, setUpdatedContent] = useState(post.content);
  const handleSubmit = (e) => {
    e.preventDefault();
    onUpdate(updatedContent);
  };
  return (
    <form onSubmit={handleSubmit}>
      <textarea
        value={updatedContent}
        onChange={(e) => setUpdatedContent(e.target.value)}
      />
      <button type="submit">更新</button>
    </form>
  );
};
export default UpdatePostForm;

1.2 在帖子组件中添加更新功能

接下来，我们需要在帖子组件中添加一个按钮，用于触发更新操作，当用户点击这个按钮时，我们将显示更新帖子表单，并将当前帖子的内容传递给它。

import React, { useState } from 'react';
import UpdatePostForm from './UpdatePostForm';
const Post = ({ post, onUpdate }) => {
  const [isUpdating, setIsUpdating] = useState(false);
  const handleUpdate = (updatedContent) => {
    onUpdate(post.id, updatedContent);
    setIsUpdating(false);
  };
  return (
    <div>
      {!isUpdating && (
        <button onClick={() => setIsUpdating(true)}>更新</button>
      )}
      {isUpdating && (
        <UpdatePostForm
          post={post}
          onUpdate={handleUpdate}
        />
      )}
    </div>
  );
};
export default Post;

1.3 在父组件中处理更新操作

我们需要在父组件中处理更新操作，当用户提交更新后的内容时，我们将调用一个函数，该函数将更新后的内容和新帖子一起发送到服务器。

import React, { useState } from 'react';
import Post from './Post';
import axios from 'axios';
const Posts = () => {
  const [posts, setPosts] = useState([]);
  const handleUpdate = async (id, updatedContent) => {
    await axios.put(/api/posts/${id}, { content: updatedContent });
    const updatedPosts = posts.map((post) =>
      post.id === id ? { ...post, content: updatedContent } : post
    );
    setPosts(updatedPosts);
  };
  return (
    <div>
      {posts.map((post) => (
        <Post key={post.id} post={post} onUpdate={handleUpdate} />
      ))}
    </div>
  );
};
export default Posts;

2. 删除帖子

要删除帖子，我们需要在帖子组件中添加一个按钮，用于触发删除操作，当用户点击这个按钮时，我们将调用一个函数，该函数将删除请求发送到服务器，以下是实现此功能的步骤：

2.1 在帖子组件中添加删除功能

我们需要在帖子组件中添加一个按钮，用于触发删除操作，当用户点击这个按钮时，我们将调用一个函数，该函数将删除请求发送到服务器。

import React, { useState } from 'react';
import axios from 'axios';
const Post = ({ post, onDelete }) => {
  const handleDelete = async () => {
    await axios.delete(/api/posts/${post.id});
    onDelete(post.id);
  };
  return (
    <div>
      <p>{post.content}</p>
      <button onClick={handleDelete}>删除</button>
    </div>
  );
};
export default Post;

2.2 在父组件中处理删除操作

我们需要在父组件中处理删除操作，当用户删除一个帖子时，我们将从状态中移除该帖子，并重新渲染列表。

import React, { useState } from 'react';
import Post from './Post';
import axios from 'axios';
const Posts = () => {
  const [posts, setPosts] = useState([]);
  const handleDelete = (id) => {
    setPosts(posts.filter((post) => post.id !== id));
  };
  return (
    <div>
      {posts.map((post) => (
        <Post key={post.id} post={post} onDelete={handleDelete} />
      ))}
    </div>
  );
};
export default Posts;

至此，我们已经完成了在基于React的博客应用程序中更新和删除帖子的功能，希望这个详细的技术教学对你有所帮助！