useActionState

// ❌ 错误: 忘记返回状态
async function submitForm(prevState, formData) {
  const name = formData.get('name');

  await fetch('/api/submit', {
    method: 'POST',
    body: JSON.stringify({ name }),
  });

  // ❌ 没有返回值!状态不会更新!
}

// ✅ 正确: 返回新状态
async function submitForm(prevState, formData) {
  const name = formData.get('name');

  const response = await fetch('/api/submit', {
    method: 'POST',
    body: JSON.stringify({ name }),
  });

  if (!response.ok) {
    // ✅ 返回错误状态
    return {
      ...prevState,
      error: '提交失败',
    };
  }

  // ✅ 返回成功状态
  return {
    ...prevState,
    success: true,
    error: null,
  };
}

// ❌ 错误: 在 Server Action 中访问组件状态
'use server';

async function submitForm(prevState, formData) {
  // ❌ 无法访问组件的 state 或 props!
  const componentState = someComponentState;

  await fetch('/api/submit', {
    body: JSON.stringify({ data: componentState }),
  });

  return { success: true };
}

// ✅ 正确: 所有数据通过 FormData 传递
'use server';

async function submitForm(prevState, formData) {
  // ✅ 从 FormData 读取所有需要的数据
  const name = formData.get('name');
  const email = formData.get('email');
  const userId = formData.get('userId');

  await fetch('/api/submit', {
    body: JSON.stringify({ name, email, userId }),
  });

  return { success: true };
}

// ✅ 客户端组件:通过隐藏字段传递额外数据
function Form() {
  const [userId] = useState('user-123');

  const [, formAction] = useActionState(submitForm, {});

  return (
    <form action={formAction}>
      {/* ✅ 通过隐藏字段传递 userId */}
      <input type="hidden" name="userId" value={userId} />

      <input type="text" name="name" />
      <input type="email" name="email" />
      <button type="submit">提交</button>
    </form>
  );
}

// ❌ 错误: 手动管理状态(useActionState 已经自动管理了)
function Form() {
  const [isPending, setIsPending] = useState(false); // ❌ 重复!
  const [error, setError] = useState(null);       // ❌ 重复!

  const [, formAction] = useActionState(async (prevState, formData) => {
    setIsPending(true); // ❌ 不需要!

    try {
      await submitToServer(formData);
      setError(null);
    } catch (err) {
      setError(err);
    } finally {
      setIsPending(false); // ❌ 不需要!
    }

    return { success: true };
  }, {});

  return (
    <form action={formAction}>
      <button disabled={isPending}>提交</button> {/* ❌ 使用手动状态 */}
      {error && <p>{error}</p>}
    </form>
  );
}

// ✅ 正确: 使用 useActionState 的 state
function Form() {
  const [state, formAction] = useActionState(async (prevState, formData) => {
    // ✅ 直接提交,useActionState 会自动管理 pending
    const response = await submitToServer(formData);

    if (!response.ok) {
      // ✅ 返回错误状态
      return {
        ...prevState,
        error: '提交失败',
      };
    }

    // ✅ 返回成功状态
    return {
      ...prevState,
      error: null,
      success: true,
    };
  }, { error: null, success: false });

  return (
    <form action={formAction}>
      {/* ✅ 使用 useActionState 的 state */}
      <button disabled={state.pending}>提交</button>
      {state.error && <p>{state.error}</p>}
      {state.success && <p>提交成功!</p>}
    </form>
  );
}

// ❌ 错误: formAction 不能用于 onClick
function Form() {
  const [, formAction] = useActionState(submitForm, {});

  return (
    <form>
      <input type="text" name="text" />
      {/* ❌ 这不会触发 useActionState */}
      <button onClick={formAction}>提交</button>
    </form>
  );
}

// ❌ 错误: formAction 不能用于其他事件
function Form() {
  const [, formAction] = useActionState(submitForm, {});

  return (
    <form>
      <input type="text" name="text" />
      <button type="button" onClick={formAction}>提交</button>
    </form>
  );
}

// ✅ 正确: formAction 必须用于 form 的 action 属性
function Form() {
  const [state, formAction] = useActionState(submitForm, {});

  return (
    {/* ✅ 正确: formAction 传递给 action 属性 */}
    <form action={formAction}>
      <input type="text" name="text" />
      <button type="submit">提交</button>
      {state.pending && <p>提交中...</p>}
    </form>
  );
}

// ✅ 如果需要用普通按钮,可以使用 action 链接
function FormWithButton() {
  const [state, formAction] = useActionState(submitForm, {});

  return (
    <form action={formAction}>
      <input type="text" name="text" />

      {/* ✅ 使用 formAction 的 name 属性创建提交按钮 */}
      <button type="submit" name="intent" value="submit">
        提交
      </button>
      <button type="submit" name="intent" value="cancel">
        取消
      </button>
    </form>
  );
}