如何用useFormState处理表单服务端响应与错误并输入时清除错误

方案一：结合useState与useEffect同步状态 #

这种方式通过本地状态控制错误显示，同时监听useFormState的服务端状态变化，确保提交后的错误能同步展示，输入时自动清除错误。

首先定义服务端提交逻辑：

// app/actions.ts
export async function submitForm(prevState: { errorMessage?: string }, formData: FormData) {
  const email = formData.get('email') as string;
  if (!email.includes('@')) {
    return { errorMessage: '请输入有效的邮箱地址' };
  }
  // 执行实际提交逻辑（如存储数据、验证等）
  return { errorMessage: undefined };
}

客户端组件实现：

'use client';

import { useFormState } from 'react-dom';
import { useState, useEffect } from 'react';
import { submitForm } from './actions';

export default function EmailForm() {
  const [serverState, formAction] = useFormState(submitForm, { errorMessage: undefined });
  const [displayError, setDisplayError] = useState(serverState.errorMessage);

  // 监听服务端状态变化，同步错误信息
  useEffect(() => {
    setDisplayError(serverState.errorMessage);
  }, [serverState.errorMessage]);

  return (
    <form action={formAction} className="space-y-4">
      <div>
        <input
          type="email"
          name="email"
          placeholder="输入邮箱"
          onChange={() => displayError && setDisplayError('')}
          className="border p-2 w-full"
        />
        {displayError && <p className="text-red-500 mt-1">{displayError}</p>}
      </div>
      <button type="submit" className="bg-blue-500 text-white p-2 rounded">
        提交
      </button>
    </form>
  );
}

方案二：用useRef跟踪输入状态（无需额外useState） #

通过useRef标记用户是否正在输入，提交时重置标记，仅当无输入操作且存在服务端错误时展示错误，避免状态同步问题。

客户端组件实现：

'use client';

import { useFormState } from 'react-dom';
import { useRef } from 'react';
import { submitForm } from './actions';

export default function EmailForm() {
  const [serverState, formAction] = useFormState(submitForm, { errorMessage: undefined });
  const isTyping = useRef(false);

  return (
    <form action={formAction} className="space-y-4">
      <div>
        <input
          type="email"
          name="email"
          placeholder="输入邮箱"
          onChange={() => isTyping.current = true}
          onFocus={() => isTyping.current = true}
          className="border p-2 w-full"
        />
        {!isTyping.current && serverState.errorMessage && (
          <p className="text-red-500 mt-1">{serverState.errorMessage}</p>
        )}
      </div>
      <button 
        type="submit"
        onClick={() => isTyping.current = false}
        className="bg-blue-500 text-white p-2 rounded"
      >
        提交
      </button>
    </form>
  );
}

问题原因说明 #

你之前遇到的“仅生效一次、后续errorMessage无法同步”问题，大概率是因为未正确设置useEffect的依赖项，或者本地状态没有在useFormState的服务端状态更新时同步。上述两种方案分别通过显式同步状态、跟踪输入状态的方式，避免了状态不同步的问题，同时保留useFormState的服务端状态管理能力。

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