NextJS 中 useFormStatus() 始终为 false

Question

我正在尝试使用

useFormStatus()

在提交表单并等待获取数据时动态更改 UI。

我有一个像

这样的表单组件

function onSubmit(data: z.infer<typeof FormSchema>) {
    requestImg(data).then((imageStringify) => {
      const binaryData = Buffer.from(imageStringify.image);
      const imageBase64 = URL.createObjectURL(
        new Blob([binaryData.buffer], { type: "image/jpeg" } /* (1) */)
      );
      setOpen(true);
      setSource(imageBase64);
    });
  }

  if (isDesktop) {
    return (
      <Form {...form}>
        <form
          onSubmit={form.handleSubmit(onSubmit)}
          className="w-2/3 space-y-6"
        >
        ...

其中

requestImg(data)

是服务器操作。

然后，我将 Button 组件嵌套在不同的

Button.tsx

文件中的 <form> 中

import { useFormStatus } from "react-dom";

import { Button } from "@/components/ui/button";

export default function ButtonSub() {
  const { pending } = useFormStatus();

  console.log(pending);

  return (
    <Button className="w-full" type="submit" aria-disabled={pending}>
      {pending ? "Processing..." : "Submit"}
    </Button>
  );
}

问题是，当我单击提交时，按钮文本不会更改为“正在处理...”

编辑

似乎仅当您在表单上使用操作关键字时才有效。我试过了

<form
        action={async (formData: FormData) => {
          requestImg(formData).then((imageStringify) => {
            const binaryData = Buffer.from(imageStringify.image);
            const imageBase64 = URL.createObjectURL(
              new Blob([binaryData.buffer], { type: "image/jpeg" } /* (1) */)
            );
            setSource(imageBase64);
            setOpen(true);
          });
        }}
        className="w-2/3 space-y-6"
      >

但是现在使用 byte8Array 生成的图像已损坏。 我有一个带有动态 src 的图像，其中充满了

const [source, setSource] = useState("");
<img src={source}/>

Answer 1

似乎只有在您使用 action 关键字时才有效 形式。

确实如此。

useFormStatus

必须在表单的子组件内使用，它可以监视服务器操作的状态变化。但据我所知，它会监听

action

。

action

定义提交后表单数据的服务器端目的地。在服务器操作的上下文中，服务器操作向当前 URL 发出 post 请求。所以它没有监听表单 onSubmit，这就是为什么你的第一个代码执行不起作用。

现在服务器操作在服务器上下文中运行，它们在服务器上执行，但

setState

是客户端特定的代码