React组件间动作事件处理：如何避免onDelete逻辑重复？

针对你遇到的重复编写handleDelete的问题，这里有几个实用的解决思路：

1. 抽离通用删除+跳转逻辑为工具函数 #

把「执行删除操作后跳转首页」的逻辑封装成独立的可复用函数，其他页面直接调用即可：

// 在项目中新建一个工具文件，比如 postUtils.js
export const deleteAndRedirect = async (deleteFn, navigate) => {
  // 执行删除操作（比如调用后端API）
  await deleteFn();
  // 跳转到首页
  navigate('/');
};

然后在DetailPage、AnotherPage中直接使用：

import { deleteAndRedirect } from './postUtils';
import { useNavigate } from 'react-router-dom';

const DetailPage = () => {
  const navigate = useNavigate();

  const handleDelete = async (postId) => {
    // 传入具体的删除逻辑，比如调用你的删除API
    await deleteAndRedirect(() => api.deletePost(postId), navigate);
  };

  return <PostCard item={post} onDelete={handleDelete} />;
};

2. 封装自定义Hook（推荐中大型项目） #

用自定义Hook把删除+跳转的逻辑完全封装起来，页面只需要传入具体的删除动作：

// 新建自定义Hook文件 usePostDelete.js
import { useNavigate } from 'react-router-dom';

export const usePostDelete = (deleteAction) => {
  const navigate = useNavigate();

  const handleDelete = async (postId) => {
    await deleteAction(postId);
    navigate('/');
  };

  return handleDelete;
};

在页面中使用时非常简洁：

import { usePostDelete } from './usePostDelete';

const AnotherPage = () => {
  // 传入删除API，直接得到封装好的handleDelete
  const handleDelete = usePostDelete((postId) => api.deletePost(postId));

  return <PostCard item={post} onDelete={handleDelete} />;
};

3. 给PostCard扩展可选Props（适合小型项目） #

如果项目规模不大，可以给PostCard增加一个redirectAfterDelete的布尔属性，让组件在删除后自动跳转，但注意这种方式会让PostCard和路由耦合：

// 修改PostCard组件
import { useNavigate } from 'react-router-dom';

function PostCard({ item, onDelete, redirectAfterDelete = false }) {
  const navigate = useNavigate();

  const handleClick = async () => {
    await onDelete(item.id);
    if (redirectAfterDelete) {
      navigate('/');
    }
  };

  return <div onClick={handleClick}>{item.title}</div>;
}

在需要跳转的页面中使用：

const DetailPage = () => {
  const handleDelete = async (postId) => {
    await api.deletePost(postId);
  };

  return (
    <PostCard 
      item={post} 
      onDelete={handleDelete} 
      redirectAfterDelete={true} 
    />
  );
};

备注 #

Home页的逻辑是修改本地数组重渲染，不需要跳转，所以保持原有的handleDelete实现即可，和其他页面的逻辑区分开。

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