Next-Shadcn-Dashboard-Starter 中如何实现数据表行的动态删除

在基于 Next.js 和 Shadcn UI 构建的管理后台项目中，实现数据表行的动态删除是一个常见需求。本文将深入探讨如何正确实现这一功能，确保在删除数据库记录的同时，前端界面也能实时更新。

问题核心分析

当用户在前端界面删除某行数据时，通常需要完成两个关键操作：

1. 调用 API 删除后端数据库中的记录
2. 更新前端界面，移除已删除的行

很多开发者会遇到删除数据库记录成功但前端界面不更新的情况，这是因为没有正确处理数据重新获取或缓存更新的逻辑。

解决方案实现

1. 删除操作的基本流程

首先需要创建一个删除确认模态框和处理函数。在用户确认删除时：

const onConfirm = async () => {
  setLoading(true);
  try {
    await deleteCar(data._id); // 调用API删除记录
    toast({
      title: "成功",
      description: "车辆删除成功",
    });
    setOpen(false);
    // 这里需要添加数据更新逻辑
  } catch (error) {
    // 错误处理
  } finally {
    setLoading(false);
  }
};

2. 前端数据更新策略

在 Next.js 应用中，有几种方式可以确保前端数据同步更新：

方法一：使用路由刷新

router.refresh(); // 强制刷新当前路由

这种方法简单直接，会重新获取页面数据，但可能导致短暂的页面闪烁。

方法二：使用 SWR 或 TanStack Query

如果项目使用了数据获取库，可以利用其提供的重新验证功能：

mutate('/api/cars'); // 重新验证数据

方法三：手动更新本地状态

对于使用状态管理的场景，可以直接修改本地数据：

setCars(prevCars => prevCars.filter(car => car._id !== data._id));

3. 完整实现示例

结合上述方法，完整的删除操作可以这样实现：

const onConfirm = async () => {
  setLoading(true);
  try {
    await deleteCar(data._id);
    toast({ title: "成功", description: "删除成功" });
    setOpen(false);
    router.refresh(); // 刷新数据
    // 或者使用状态更新
    // setCars(prev => prev.filter(item => item._id !== data._id));
  } catch (error) {
    toast({ title: "错误", description: "删除失败" });
  } finally {
    setLoading(false);
  }
};

最佳实践建议

1. 用户体验优化：在删除操作执行期间显示加载状态，防止用户重复操作
2. 错误处理：妥善处理API调用可能出现的错误，给予用户明确反馈
3. 数据一致性：确保前端缓存与后端数据保持一致，避免显示已删除的数据
4. 撤销功能：对于重要数据，考虑实现删除撤销功能，提升用户体验

通过以上方法，可以确保在 Next-Shadcn-Dashboard-Starter 项目中实现流畅的数据删除体验，同时保持前后端数据的一致性。