React Hook Form首次提交时isSubmitSuccessful返回false问题求助

我在使用React Hook Form结合EmailJS开发网站表单，希望通过isSubmitSuccessful属性动态显示Headless UI对话框，但遇到以下问题：

• 首次提交表单时，即便表单验证有效且EmailJS的sendForm函数成功返回无错误，isSubmitSuccessful仍返回false
• 故意留空reCAPTCHA复选框导致提交失败后，第二次提交表单可正常触发状态更新
• 尝试过添加e.preventDefault()阻止默认行为，但未解决问题

代码示例（Next.js 13） #

"use client";

import React, { useRef, useState } from "react";
import { useForm } from "react-hook-form";
import emailjs from "@emailjs/browser";
import styles from "./Contact.module.css";
import ReCAPTCHA from "react-google-recaptcha";
import DialogPopup from "../shared/Dialog/Dialog";

function ContactForm() {
  const [dialogIsOpen, setDialogIsOpen] = useState(false);

  const form = useRef();
  const recaptchaRef = useRef(null);

  const {
    register,
    handleSubmit,
    reset,
    formState: { isSubmitSuccessful },
  } = useForm({
    defaultValues: {
      user_name: "",
      user_email: "",
      message: "",
    },
  });

  const openDialog = () => {
    setDialogIsOpen(true);
  };

  const closeDialog = () => {
    reset();
    recaptchaRef.current.reset();
    setDialogIsOpen(false);
  };

  const onSubmit = (data, e) => {
    e.preventDefault();
    emailjs
      .sendForm(
        "contact_service",
        "contact_form",
        form.current,
        // 出于安全考虑已移除密钥
      )
      .then(
        (result) => {
          console.log("isSubmitSuccessful", isSubmitSuccessful);
          console.log("SUCCESS!");
          console.log(result.text);
        },
        (error) => {
          console.log("isSubmitSuccessful", isSubmitSuccessful);
          console.log("FAILED...");
          console.log(error.text);
          alert("Please verify that you are a human.");
        }
      );
    if (isSubmitSuccessful) {
      openDialog();
    }
  };

  return (
    <form
      className={styles["contact-form"]}
      onSubmit={handleSubmit(onSubmit)}
      ref={form}
    >
      <input
        className={styles["contact-form-field"]}
        type="text"
        placeholder="Name"
        name="user_name"
        {...register("user_name", { required: true, maxLength: 120 })}
      />
      <input
        className={styles["contact-form-field"]}
        type="text"
        placeholder="Email"
        name="user_email"
        {...register("user_email", { required: true, pattern: /^\S+@\S+$/i })}
      />
      <textarea
        className={styles["contact-form-field"]}
        type="text"
        placeholder="Additional Information"
        name="message"
        {...register("message", {
          required: false,
          maxLength: 250,
        })}
      />

      <ReCAPTCHA
        sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_KEY}
        ref={recaptchaRef}
      />
      <input className={styles.submit} type="submit" value="Send" />

      <DialogPopup
        title="Message Sent!"
        description="Thank you for your inquiry"
        buttonText="Finish"
        isOpen={dialogIsOpen}
        closeDialog={closeDialog}
      />
    </form>
  );
}

export default ContactForm;

问题解决 #

查阅React Hook Form文档并测试后发现，问题根源在于RHF无法识别EmailJS的sendForm方法，导致handleSubmit调用该方法时不会自动更新isSubmitSuccessful状态。

将openDialog()移至sendForm的成功回调中后，问题已解决：

const onSubmit = (data, e) => {
  e.preventDefault();
  emailjs
    .sendForm(
      "contact_service",
      "contact_form",
      form.current,
      // 出于安全考虑已移除密钥
    )
    .then(
      (result) => {
        console.log("SUCCESS!");
        console.log(result.text);
        openDialog(); // 移至此处触发对话框
      },
      (error) => {
        console.log("FAILED...");
        console.log(error.text);
        alert("Please verify that you are a human.");
      }
    );
};

内容的提问来源于stack exchange，提问作者Nick O.