Remix中表单多次提交：已取消请求仍触发action函数是否正常？

这是正常行为，并非配置遗漏 #

浏览器标记请求“已取消”，本质是中断了客户端与服务器的连接，但只要请求已经发送到服务器，后端就会开始处理——浏览器的取消操作无法回溯已经抵达服务器的请求。比如重复点击提交按钮时，前一个请求还在传输中，浏览器发起新请求并取消旧的，但旧请求可能已经到达后端，所以action函数仍会接收到。

如何避免重复处理？ #

要解决这个问题，需要前后端配合做防重复提交控制：

• 前端侧：
  • 点击提交后立即禁用按钮，直到请求完成（成功/失败）再恢复可用状态
  • 用状态变量标记“正在提交”，触发提交前先检查该状态，阻止重复触发
  • 对提交事件做防抖处理，限制短时间内的重复触发
• 后端侧：
  • 生成唯一表单令牌，每个表单实例对应唯一令牌，后端验证令牌有效性，同一令牌仅允许处理一次
  • 设计业务操作的幂等性，比如通过订单ID、用户+操作类型等唯一标识，判断该请求是否已经处理过，避免重复执行

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