Next.js中useFormState无法接收服务端Action返回消息问题

问题根源 #

你的代码里存在一个关键错误：SubmitButton组件的button直接使用了原始的login函数作为formAction，这绕过了useFormState包装后的formAction，导致服务端返回的状态无法同步到组件的state中。useFormState必须通过它返回的包装后的action才能完成状态的更新流转。

修复步骤 #

1. 在LoginForm组件中，将useFormState返回的formAction传递给SubmitButton组件
2. 在SubmitButton的button元素中使用这个传递过来的formAction，替换掉原来的login函数

修改后的完整代码 #

LoginForm组件

"use client";
import { useEffect } from "react";
import { useFormStatus, useFormState } from "react-dom";
import { login } from "./actions";

const LoginForm = () => {
  const initialState = {
    message: "",
  };
  const [state, formAction] = useFormState(login, initialState);

  useEffect(() => {
    console.log("change:", state);
  }, [state]);

  return (
    <form action={formAction}>
      <div>
        <label htmlFor="email">Email:</label>
        <input
          id="email"
          name="email"
          type="email"
          required
        />
      </div>

      <div>
        {/* 传递formAction给SubmitButton */}
        <SubmitButton formAction={formAction} />
        <span>
          {JSON.stringify(state)}
          {state.message}
        </span>
        <p aria-live="polite" className="sr-only">
          {state?.message}
        </p>
      </div>
    </form>
  );
};

const SubmitButton = ({ formAction }) => {
  const { pending } = useFormStatus();

  return (
    {/* 使用传递过来的formAction */}
    <button formAction={formAction} disabled={pending}>
      {pending ? "Checking..." : " Log in"}
    </button>
  );
};

export default LoginForm;

actions.js（无需修改）

"use server";

export async function login(previousState, formData) {
  return {
    message: "Please enter a valid email",
  };
}

额外说明 #

• 确保你的React和Next.js版本支持useFormState（Next.js 13.4+，React 18.2+）
• useFormStatus的pending状态正常工作是因为它只监听表单的提交状态，和action是否被包装无关，但状态更新必须依赖useFormState返回的action

内容的提问来源于stack exchange，提问作者Skar