Hello! 欢迎来到小浪资源网!



通过示例快速学习 useActionState (Nextjs


通过示例快速学习 useActionState (Nextjs

使用表单时,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。

相关阅读