使用表单时，useactionstate 挂钩简化了捕获表单值并将其作为 formdata 传递到服务器操作的过程。
useactionstate 还通过使用服务器操作返回的值自动更新状态变量来管理状态。这对于渲染输入字段验证错误特别有帮助，如下面使用 zod 的示例所示。
form.tsx:
"use client"; import { useactionstate } from "react"; import { signup } from "../actions"; export default function signup() { const [state, action] = useactionstate(signup, {}); return ( <form action={action}> <div> <label htmlfor="username">username:</label> <input type="text" id="username" name="username" defaultvalue={state.username} required /> {state.errors?.username && ( <p classname="text-sm text-red-500">{state.errors.username}</p> )} </div> <div> <label htmlfor="password">password:</label> <input type="password" id="password" name="password" defaultvalue={state.password} /> {state.errors?.password && ( <p classname="text-sm text-red-500">{state.errors.password}</p> )} </div> <input type="submit" value="sign up" /> </form> ); }
actions.ts：
"use server"; import { z } from "zod"; const SignUpSchema = z.object({ username: z.string(), password: z .string() .min(8, { message: "Be at least 8 characters long" }) .regex(/[a-zA-Z]/, { message: "Contain at least one letter." }) .regex(/[0-9]/, { message: "Contain at least one number." }) .regex(/[^a-zA-Z0-9]/, { message: "Contain at least one special character.", }) .trim(), }); export type SignUpActionState = { username?: string; password?: string; errors?: { username?: string[]; password?: string[]; }; }; export async function signUp( _prevState: SignUpActionState, form: FormData ): promise<SignUpActionState> { const username = form.get("username") as string; const password = form.get("password") as string; const validatedFields = SignUpSchema.safeParse({ username, password, }); if (!validatedFields.success) { return { username, password, errors: validatedFields.error.flatten().fieldErrors, }; } // process validated form inputs here return { username, password }; }
useactionstate 还返回一个 ispending 属性（示例），指示服务器操作的 promise 是否仍在解析。
参考 ispending 暂时禁用表单元素，例如提交按钮，以防止用户在正在进行的操作完成之前快速连续多次单击它。
useactionstate 与 useformaction 和 useformstatus
如果您熟悉 useformaction 和 useformstatus，您会发现 useactionstate 非常相似。
本质上，它结合了两个钩子的功能，并被重命名以反映服务器操作不仅仅适用于表单（您还可以将 useactionstate 与按钮和其他元素一起使用。）
请记住，useformstatus 从 next.JS 15 开始已被弃用，因此您应该继续导入 useactionstate。
