如何解决React中FormSpree表单提交后加载空白页问题

问题核心 #

表单能正常发送邮件，但提交后自动跳转到空白页，无法实现「提交表单→发送消息→清空表单→页面不刷新」的预期流程。尝试自定义handleSubmit时错误地在函数内部调用useForm（违反React Hook调用规则），同时原代码在组件顶层直接判断state.succeeded会触发不必要的重复渲染。

正确实现方案 #

1. 严格遵守React Hook规则 #

useForm必须在组件顶层作用域调用，不能嵌套在自定义函数、条件判断或循环中。

2. 封装提交逻辑，阻止默认跳转 #

结合UI组件（如Antd Form）的onFinish事件，封装自定义处理函数，调用FormSpree的提交方法，同时在成功后执行表单清空和提示操作。

修改后的完整代码示例 #

import { useForm } from '@formspree/react';
import { useRef, useState } from 'react';
import { Form, message } from 'antd';

const Contact = () => {
  const formRef = useRef<any>(null);
  const captchaRef = useRef<HCaptcha>(null);

  const [token, setToken] = useState<string>('');
  // 顶层调用useForm，符合Hook规则
  const [state, formspreeHandleSubmit] = useForm('formSpree-id');

  // 自定义提交处理函数
  const handleSubmit = async (values: any) => {
    // 调用FormSpree的提交方法，传入表单数据
    await formspreeHandleSubmit(values);

    // 根据提交状态执行对应逻辑
    if (state.succeeded) {
      // 清空表单字段
      formRef.current?.resetFields();
      // 显示成功提示
      message.success('消息已发送');
    } else if (state.errors.length > 0) {
      // 处理提交错误
      message.error(`提交失败：${state.errors[0].message}`);
    }
  };

  const onExpire = () => {
    setToken('');
    message.warning('验证码已过期');
  };

  const onError = (err: string) => {
    setToken('');
    message.error(`验证码错误：${err}`);
  };

  return (
    <Wrapper>
      <Title>联系我们</Title>
      <Form
        ref={formRef}
        name='nest-messages'
        onFinish={handleSubmit}
        validateMessages={validateMessages}
        // 明确阻止表单默认提交行为，避免跳转
        onSubmit={(e) => e.preventDefault()}
      >
        {/* 表单字段内容 */}
        [...]
      </Form>
    </Wrapper>
  );
};

export default Contact;

关键说明 #

• 阻止默认跳转：Antd Form的onFinish默认会阻止原生提交行为，但添加onSubmit={(e) => e.preventDefault()}可进一步确保不会触发页面跳转。
• 异步状态判断：formspreeHandleSubmit是异步函数，需用await等待提交完成后再判断状态，保证逻辑执行顺序正确。
• 避免重复渲染：将表单清空、提示逻辑放在自定义handleSubmit内，替代组件顶层的状态判断，防止因状态变化触发重复渲染。

内容的提问来源于stack exchange，提问作者Mikołaj Wittbrodt