React 19 的 useActionState：禁用提交按钮从来不是防重复提交的正解
来源：dev.to — 2026-07-28
📋 概述
作者回顾了多年来手写表单提交状态（result/submitting/error 三件套加 try/catch/finally）的老模式，以及用本地 isPending 标志“修复”双击提交的隐患——在慢速网络下，那个本地标志可能在实际请求完成前就翻回 false，用户连点三次订单都会各发一次。useActionState 把 isPending 绑定到 React 自己的 transition 跟踪上，而非你猜测时机的布尔值，并自带状态管理与错误处理，从根上解决重复提交问题。
🔑 核心要点
- 老模式的坑：三个状态变量加 try/catch/finally，只要漏掉 finally 就会留下重复提交的 bug
- 假安全习惯：setLocalPending(true) 这类本地标志在慢网下会提前复位，用户可能连点造成多个请求
- 队列而非竞态：React 不会丢弃或竞态多个提交，而是排队依次执行，于是产生多个订单
- isPending 绑定 transition：useActionState 的 isPending 与 React 过渡跟踪绑定，不再是你猜时机的布尔值
- 极简新写法：无需 onSubmit/preventDefault，用 disabled={isPending} 就真正解决了防重复提交
💡 金句
It felt like React quietly admitting they had watched enough of us get this wrong and finally built the fix.
👍 0
👎 0
← 返回 Dev.to 首页