React19新特性，如何理解 useFormStatus 表单状态钩子？

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

React@19新出的特性，钩子useFormStatus()。看名字，它必然是配合表单元素使用的。它能够在表单子组件中，获取到表单提交时的pending状态和表单内容。然而，这个useFormStatus()钩子，是到目前为止，最奇怪的钩子，没有之一。

苏南大叔的“程序如此灵动”博客，记录苏南大叔的代码编程经验总结。本文测试环境：nodejs@20.18.0，create-react-app@5.0.1，react@19.0.0。useFormStatus()的作用对象是表单的子元素，或者说是input系列输入框。

奇怪的钩子

这个钩子的作用要求是表单的子元素，听起来是不是有些奇怪？换句话说，这个useFormStatus()的代码位置必须在form里面。当然，放在form标签外面，也不会报错，就是不正常工作而已。

官方文档：

• https://react.dev/reference/react-dom/hooks/useFormStatus

而且，这是个来自react-dom的钩子，而不是react。

import { useFormStatus } from "react-dom";
//...
const { pending, data, method, action } = useFormStatus();

• [常用]pending为true时，表示请求正在进行。
• [常用]data格式为FormData，表示此次提交里表单的所有内容。
• method表示在提交时，所采用的请求方式，默认值为get。貌似没有任何意义啊...
• action这个是表单提交的脚本... 貌似也没有啥用。

使用范例

下面的例子中，和useFormStatus()钩子共同工作的是个提交的按钮。它共有四个导出值，分别是：pending,data, method, action。

import { useFormStatus } from "react-dom";
function Test() {
  const { pending, data, method, action } = useFormStatus();
  // console.log(method); // 居然是个get
  // console.log(action); // 自定义的action代码,即下面的formAction定义
  return (
    <>
      <button type="submit" disabled={pending}>
        {pending ? "Submitting..." : "Submit"}
      </button>
      <p>{data ? `请求 ${data?.get("name")}...` : ""}</p>
    </>
  );
}
async function formAction(formdata) {
  const name = formdata.get("name");
  if (!name) {
    return;
  }
  await new Promise((resolve) => setTimeout(resolve, 10000));
  return {ok:true};
}
export default function App() {
  return (
    <>
      <form action={formAction}>
        <input type="text" name="name" />
        <Test />
      </form>
    </>
  );
}

这个例子的效果就是：在提交按钮点击的时候，可以在局部获得全局表单的提交状态（pending）和提交的数据...（个人总是觉得没啥意义，不知道为啥就被吹上天了呢...）

可能的问题

对应的form不能设置method，否则就会报错：

react-dom-client.development.js:16965 Cannot specify a encType or method for a form that specifies a function as the action. React provides those automatically. They will get overridden.

这都react年代了，设置method确实没有啥意义。但是，为啥还要保留这个选项呢？

相关文章

• https://newsn.net/say/react-useactionstate.html
• https://newsn.net/say/react-useactionstate-2.html

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。