#Next.js#React

Actions + useFormStatus 体验分享

由@su-wan发起讨论 · 发布于 2026年7月31日 · 更新于 2026年8月3日

React 19 的 useFormStatus 配合 Server Actions,做表单提交体验非常好。提交按钮的 loading 态一行就搞定:

tsx
function SubmitButton() {
  const { pending } = useFormStatus();
  return <button disabled={pending}>{pending ? "提交中" : "提交"}</button>;
}

关键是不用再手动维护 state,组件也更干净。配合 useActionState 拿错误信息,整个表单几乎零样板代码。

唯一不爽的是它必须在 <form> 内部才能拿到状态,跨组件层级有点别扭。

你们做表单还在用 react-hook-form 吗?还是直接上 Actions?

回复

暂时没有回复。

Related

相关推荐