React 新钩子 useActionState

PHP中文网 • 2025年3月7日 07:33:28 • 编程技术 • 阅读 2

通常，在使用表单时，您需要：

a) 显示加载程序

b) 显示验证错误

这通常意味着管理几个状态变量。但随着 react 19 中引入的新 useactionstate 钩子，现在有一种更简单的方法来处理它。

链接

演示

代码库

react hook：useactionstate

在以下代码片段中，请注意如何使用 useactionstate：

import { useactionstate } from "react";import loader from "@/components/loader";function form() {  const [error, submitaction, ispending] = useactionstate(    async (previousstate, formdata) => {      const error = await updatename(formdata.get("name"));      if (error) {        return error;      }      return "";    },    ""  );  return (          name:             {ispending && }      {error && {error}
}      );}

登录后复制

有几件事要提一下：

useactionstate 返回三件事：

第一个变量 error 用于表示错误。在本例中，它是一个字符串，但它实际上可以是任何类型。

第二个变量submitaction是触发表单提交的函数。

第三个变量 ispending 是一个布尔值，表示待处理状态。它对于在提交表单时禁用元素或显示微调器很有用。

useactionstate 需要两个参数：

第一个参数是表单提交时submitaction触发的函数。

第二个参数是错误的初始值。在本例中，它是一个空字符串，但您可以使用“填写所有字段”之类的内容来代替。

useactionstate 提供了 formdata，它是 formdata 的一个实例，基本上是一个表示表单中字段的对象。

表单中的输入字段：

登录后复制

可以这样读：

formdata.get("name");

登录后复制

name 是输入字段的名称。

error 将显示来自服务器的任何错误。如果没有，那就是空的。

ispending 会在提交表单时自动由钩子更新为 true，并在收到后端响应后设置回 false。

如果没有错误，useactionstate 还会处理重置表单。

向后端请求

对于这个演示，updatename 函数非常基本，它只是向后端发出 post 请求，传递名称。如果后端返回错误，则该函数返回该错误；否则，它返回一个空字符串，这意味着服务器没有错误。

async function updatename(name) {  const response = await fetch("/lambda-function", {    method: "post",    body: json.stringify({ name }),  });  if (!response.ok) {    const { message } = await response.json();    return message;  }  return "";}

登录后复制

后端 post 请求处理程序

我正在使用一个简单的 lambda 函数，它仅检查名称是否是至少包含 2 个字符的字符串。还有 2 秒的延迟，只是为了给 ui 一些时间来显示微调器。

const sleep = (ms) => {  return new Promise((resolve) => setTimeout(resolve, ms));};const handler = async (event) => {  const { name } = JSON.parse(event.body || "{}");  await sleep(2_000);  if (name?.length < 2) {    return {      statusCode: 400,      body: JSON.stringify({ message: "Name must be at least 2 characters." }),    };  }  return {    statusCode: 200,  };};

登录后复制