医疗APP表格服务删除功能异常：部分数据无法删除且刷新后恢复

问题现象 #

• 后端返回的4项医疗服务中，仅3项可执行删除操作，剩余1项无法删除
• 删除操作完成后刷新页面，所有被移除的服务会从后端重新加载，本地删除操作完全失效

问题函数分析 #

给出的removePlano函数存在以下核心问题：

async removePlano(cenarioId, operadora, plano) {
      let vm = this;
      vm.recuperaCenario({ id: cenarioId });
      vm.removerPlano({
        plano: plano
      });

      vm.resetRedes();
      vm.resetRegioes();

      let grupos = vm.cenario.operadoras.reduce(function (prev, curr) {
        return [...prev, ...curr.grupos];
      }, []);

      let redes = vm.agrupaRedes(vm.validaPlano(grupos));

      await vm.updateRedes(redes);

      await vm.buscaRegiao({
        uf: operadora.filtros.cidade.uf,
        cidade: '',
        credenciado: operadora.filtros.credenciado ? operadora.filtros.credenciado.tipo + operadora.filtros.credenciado.id : '',
        redes: vm.cenario.redes
      });

      await vm.updateRegioes(JSON.parse(JSON.stringify(vm.getRegioes)));
}

1. 异步操作未等待完成 #

vm.recuperaCenario和vm.removerPlano都是异步操作，但未添加await关键字，导致后续逻辑（比如重置网络、更新区域）可能在后端删除/数据拉取完成前就执行，造成本地状态与后端数据不一致。

2. 数据拉取时机错误 #

在执行删除操作前调用vm.recuperaCenario，会直接从后端拉取原始数据，可能覆盖正在进行的删除操作——如果removerPlano还未完成后端数据删除，新拉取的旧数据会把要删除的服务重新带回本地状态。

3. 状态更新未依赖后端操作结果 #

本地状态更新（如resetRedes、updateRedes）没有等后端删除操作确认成功就执行，一旦后端删除失败，本地状态和后端数据就会出现偏差，刷新后自然会恢复原始数据。

修复方案 #

async removePlano(cenarioId, operadora, plano) {
  const vm = this;

  // 先执行后端删除操作，等待确认成功
  await vm.removerPlano({ plano: plano });
  
  // 删除成功后，拉取最新的场景数据
  await vm.recuperaCenario({ id: cenarioId });

  vm.resetRedes();
  vm.resetRegioes();

  const grupos = vm.cenario.operadoras.reduce((prev, curr) => [...prev, ...curr.grupos], []);
  const redes = vm.agrupaRedes(vm.validaPlano(grupos));

  await vm.updateRedes(redes);

  await vm.buscaRegiao({
    uf: operadora.filtros.cidade.uf,
    cidade: '',
    credenciado: operadora.filtros.credenciado 
      ? `${operadora.filtros.credenciado.tipo}${operadora.filtros.credenciado.id}` 
      : '',
    redes: vm.cenario.redes
  });

  await vm.updateRegioes(JSON.parse(JSON.stringify(vm.getRegioes)));
}

关键修复点 #

• 给vm.removerPlano和vm.recuperaCenario添加await，确保异步操作按顺序执行，避免时序问题
• 调整操作顺序：先完成后端删除，再拉取最新数据，彻底避免旧数据覆盖删除结果
• 所有依赖后端状态的本地更新逻辑，都在后端操作完成后执行，保证数据一致性

单项服务无法删除的额外排查点 #

• 检查该服务的plano参数是否正确传递（比如ID是否为空、格式是否匹配后端要求）
• 查看removerPlano接口对该服务的返回日志，确认是否存在权限限制、数据关联锁定等报错
• 检查validaPlano函数逻辑，是否误将该服务标记为不可删除并保留在本地状态

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