React useActionState管理表单提交状态的新Hook

在React应用中，表单提交是常见交互。传统方式需要手动管理loading、error、success等状态，代码冗余且易出错。React 19引入的useActionState Hook简化了这一过程，内置状态管理，让表单提交逻辑更清晰。

基本概念

useActionState专门用于管理表单提交状态，自动处理loading、error和success状态。其语法为：

const [state, formAction] = useActionState(serverAction, initialState, permalink?)

• serverAction：提交表单的异步函数，接收表单数据和之前的状态。
• initialState：初始状态对象，通常包含error和data字段。
• permalink（可选）：用于表单重置的标识符。

基本用法

以下是一个简单的表单提交示例，展示useActionState的基本用法。

import { useActionState } from 'react';

async function submitForm(prevState, formData) {
  // 模拟API请求
  await new Promise(resolve => setTimeout(resolve, 1000));

  // 模拟错误
  if (formData.get('username') === 'admin') {
    return { error: '用户名已存在' };
  }

  return { success: true, data: { username: formData.get('username') } };
}

function LoginForm() {
  const [state, formAction] = useActionState(submitForm, { error: null, data: null });

  return (
    <form action={formAction}>
      <input type="text" name="username" placeholder="用户名" required />
      <button type="submit">
        {state.loading ? '提交中...' : '登录'}
      </button>
      {state.error && <p style={{ color: 'red' }}>{state.error}</p>}
      {state.success && <p style={{ color: 'green' }}>登录成功！</p>}
    </form>
  );
}

进阶用法

表单验证

在serverAction中添加验证逻辑，确保数据有效性。

async function submitForm(prevState, formData) {
  const username = formData.get('username');
  const password = formData.get('password');

  if (!username || !password) {
    return { error: '用户名和密码不能为空' };
  }

  if (password.length < 6) {
    return { error: '密码至少6位' };
  }

  // 模拟API请求
  await new Promise(resolve => setTimeout(resolve, 1000));

  return { success: true, data: { username } };
}

错误处理

useActionState自动捕获serverAction中的错误，并将其存储在state中。

async function submitForm(prevState, formData) {
  try {
    // 模拟API请求
    await fetch('/api/login', {
      method: 'POST',
      body: formData
    });

    return { success: true };
  } catch (error) {
    return { error: error.message };
  }
}

成功处理

提交成功后，可以重置表单或显示成功信息。

async function submitForm(prevState, formData) {
  // 处理逻辑...

  if (success) {
    // 重置表单
    return { success: true, reset: true };
  }

  return { error: '提交失败' };
}

function LoginForm() {
  const [state, formAction] = useActionState(submitForm, { error: null });

  return (
    <form action={formAction}>
      {/* 表单内容 */}
      {state.reset && <p>表单已重置</p>}
    </form>
  );
}

表单重置

使用permalink参数实现表单重置，适用于复杂表单场景。

function ComplexForm() {
  const [state, formAction] = useActionState(submitForm, { error: null }, '/reset-form');

  return (
    <form action={formAction}>
      {/* 表单内容 */}
      <button type="submit">提交</button>
      <button formAction="/reset-form" type="submit">重置</button>
    </form>
  );
}

对比旧方法

传统方式需要手动管理状态，代码冗余：

function OldForm() {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [success, setSuccess] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    setError(null);

    try {
      await submitForm();
      setSuccess(true);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* 表单内容 */}
      {loading && <p>提交中...</p>}
      {error && <p>{error}</p>}
      {success && <p>提交成功</p>}
    </form>
  );
}

useActionState优势：

• 自动管理loading、error、success状态
• 减少样板代码
• 内置错误处理
• 支持表单重置

注意事项

1. serverAction必须是异步函数
2. 初始状态应包含error和data字段
3. permalink用于表单重置，需配合formAction使用
4. 状态更新是异步的，避免直接依赖state值

通过useActionState，React表单提交逻辑变得更加简洁和可靠，推荐在新项目中优先使用。