通过示例快速学习 useActionState (Nextjs-js教程-PHP中文网

通过示例快速学习 useActionState (Nextjs

聖光之護

发布： 2024-11-17 08:06:35

转载

860人浏览过

通过示例快速学习 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 是否仍在解析。

android基础教程张波等译 pdf版

《Android基础教程》内容完整丰富，具有较强的通用性，读者都能通过《Android基础教程》快速学习Android开发，提高相关技能。Android是谷歌公司开发的全新开源手机平台。《Android基础教程》是一部关于Android开发的基础教程，采用由浅入深、循序渐进的方式讨论Android。书中还结合数独游戏等实例更加形象生动地讲解了Android开发的基本流程，且每章最后都有一个“快速阅读指南”，更加方便了读者的阅读。android基础教程，美Ed_Bur