MERN栈DELETE功能无法删除问题求助

问题现象 #

1. 点击删除图标后，Network面板显示DELETE请求成功（200状态），但前端帖子列表无变化，控制台也未输出“Post deleted successfully.”提示。
2. 尝试传入postId到handleDelete函数时，后端触发无限循环的DELETE请求，必须强制停止服务才能中断。

相关代码 #

后端路由与控制器 #

router.delete("/posts/:id", verifyToken, deletePost);

export const deletePost = async (req, res) => {
  const { id } = req.params;
  try {
    await Post.findByIdAndRemove(id);
    res.status(200).json({ message: "Post deleted successfully." });
  } catch (error) {
    console.error(error);
    res.status(404).json({ message: error.message });
  }
};

React Redux Reducer #

deletePost: (state, action) => {
  state.posts = state.posts.filter((post) => post._id !== action.payload);
},

React组件中Fetch与Dispatch代码 #

const PostWidget = ({
  postId,
  postUserId,
  name,
  description,
  location,
  picturePath,
  userPicturePath,
  likes,
  comments,
}) => {
...
const handleDelete = async () => {
    try {
      const response = await fetch(
        `${process.env.REACT_APP_API_URL}/posts/${postId}`,
        {
          method: "DELETE",
          headers: {
            Authorization: `Bearer ${token}`,
            "Content-Type": "application/json",
          },
        }
      );
      const result = await response.json();

      if (response.ok) {
        dispatch(deletePost({ post: result }));
      }
    } catch (err) {
      console.log(err.message);
    }
  };
...
return (
<IconButton onClick={handleDelete}>
   <DeleteOutlined />
</IconButton>
)
}

问题原因与修复方案 #

问题1：前端无更新、无控制台提示 #

• 原因：

  1. 后端返回的是包含message的对象，但dispatch时传递的是{ post: result }，而reducer中是用action.payload和post._id对比，此时payload是整个对象，不是帖子ID，导致过滤逻辑不生效，列表无法更新。
  2. 代码中未添加控制台日志输出后端返回的成功信息，所以看不到提示。

• 修复：
  修改handleDelete中的dispatch逻辑，直接传递postId，并添加控制台日志：

  const handleDelete = async () => {
    try {
      const response = await fetch(
        `${process.env.REACT_APP_API_URL}/posts/${postId}`,
        {
          method: "DELETE",
          headers: {
            Authorization: `Bearer ${token}`,
            "Content-Type": "application/json",
          },
        }
      );
      const result = await response.json();
  
      if (response.ok) {
        console.log(result.message); // 输出成功提示
        dispatch(deletePost(postId)); // 传递postId给reducer
      }
    } catch (err) {
      console.log(err.message);
    }
  };
  

问题2：无限DELETE请求 #

• 原因：
  若尝试传参时写成onClick={handleDelete(postId)}，会导致组件渲染时立即执行handleDelete函数，触发请求后组件更新，再次渲染又执行函数，形成无限循环。

• 修复：
  需要用箭头函数包裹，避免立即执行：

  <IconButton onClick={() => handleDelete(postId)}>
    <DeleteOutlined />
  </IconButton>
  

  （注：若PostWidget已通过props接收postId，原onClick={handleDelete}写法是正确的，无需传参；只有当需要动态传递参数时才用箭头函数包裹）

内容的提问来源于stack exchange，提问作者Rha3L