React useActionState 如何管理表单提交状态？

Question

仓乃文 · Accepted Answer

useActionState 是 React 19 新增的 Hook，专门管理表单提交的 pending 状态、返回结果和错误信息，替代手动管理 loading/error 状态的繁琐写法。基本用法： ```javascript async function submitForm(prevState, formData) { const name = formData.get("name"); if (!name) return { error: "请输入姓名" }; // 返回错误 await saveToServer({ name }); return { success: true, message: "提交成功" }; // 返回结果 } function Form() { const [state, submitAction, isPending] = useActionState(submitForm, { error: null, success: false, }); return ( ); } ``` 补充说明： - 第一个参数是异步函数，接收上一次返回值和 FormData - 第二个参数是初始状态 - 返回 [state, action, isPending]，isPending 自动管理 - 配合 Server Actions 使用时，表单提交在服务端执行，JS 加载前即可工作 - 替代了之前手动 useState 管理 loading/error 的模式