删除表格选中项后无数据时，复选框状态与计数徽章未正确更新的问题求助

看起来你遇到的是状态同步时机和边界逻辑处理的问题，我帮你拆解分析并给出针对性的修复方案：

首先看核心问题1：删除后计数显示异常（徽章同步的潜在问题） #

先留意你多选删除的这段代码：

await Promise.all(deletePromises);
setSelectedSalesOrders(new Set());
toast.success(
  `Successfully deleted ${selectedSalesOrders.size} sales orders`
);

你在清空选中集合setSelectedSalesOrders(new Set())之后，才去取selectedSalesOrders.size，这时候集合已经是空的了，所以Toast会错误显示“删除了0条”。虽然你调用了清空状态，但如果状态更新的批次和UI渲染不同步，也可能导致徽章短暂显示异常。

修复方案：先保存删除前的选中数量，再执行状态清空：

// 多选删除逻辑修改
const deletedCount = selectedSalesOrders.size; // 提前存下删除前的选中数量
await Promise.all(deletePromises);
setSelectedSalesOrders(new Set());
toast.success(`Successfully deleted ${deletedCount} sales orders`);

核心问题2：无数据时全选复选框仍可被选中 #

这应该是你的全选框逻辑没处理表格数据为空的边界场景。比如你可能用了类似这样的选中判断：

checked={selectedSalesOrders.size === salesOrders.length}

当表格数据被删光（salesOrders.length === 0）且选中集合也为空时，0 === 0会返回true，导致全选框被选中，但实际上没有任何数据可选，这就是你说的“无数据时复选框仍能勾选”的原因。

修复方案：给全选框的选中条件加上数据非空的前置判断，同时禁用无数据时的全选框：

// 假设你的全选框结构，修改checked和disabled属性
<input
  type="checkbox"
  checked={salesOrders.length > 0 && selectedSalesOrders.size === salesOrders.length}
  disabled={salesOrders.length === 0}
  onChange={handleSelectAll}
/>

同时，全选的处理函数也要加边界拦截，避免无数据时触发无效的状态更新：

const handleSelectAll = (e) => {
  if (salesOrders.length === 0) return; // 无数据时直接返回，不执行任何操作
  if (e.target.checked) {
    setSelectedSalesOrders(new Set(salesOrders.map(item => item.id)));
  } else {
    setSelectedSalesOrders(new Set());
  }
};

补充：确保选中集合是React State #

你已经调用了setSelectedSalesOrders(new Set())清空选中项，但如果selectedSalesOrders不是用useState声明的React状态，状态更新就不会触发UI重新渲染，徽章自然不会同步消失。确认你的状态声明是这样的：

const [selectedSalesOrders, setSelectedSalesOrders] = useState(new Set());

最后验证RTK配置 #

你在deleteSalesOrder mutation里已经配置了invalidatesTags: ["SalesOrders","SalesSummary"]，这部分是正确的，删除操作会自动触发销售订单数据的重新拉取，表格会同步更新为空数组，配合上面的修复，就能完全解决问题了。

修改后，删除全部数据的场景下：

1. 选中集合被清空，徽章会自动隐藏
2. 全选框因表格无数据被禁用且处于未选中状态
3. Toast也能正确显示实际删除的数量

内容来源于stack exchange