react-hook-form中使用if-else验证时无效状态无输出问题求助

核心原因分析 #

你遇到的问题大概率是以下两种情况之一：

1. handleSubmit默认行为阻断无效场景回调：react-hook-form的handleSubmit默认会在表单验证失败时，直接阻止传入的回调函数执行，导致你的else分支根本没机会运行。
2. isValid更新时机未覆盖无效场景：如果表单验证模式（mode）设为onSubmit，只有提交时才会触发验证，而无效时handleSubmit阻断了回调，自然看不到输出；若未正确监听isValid的状态变化，也会错过无效时的判断。

代码修复方案 #

方案1：修改验证模式，实时监听isValid #

将表单模式改为onChange或onBlur，让isValid实时更新，再用useEffect监听状态变化：

import { useForm, useEffect } from "react-hook-form";

function App() {
  const { register, formState: { isValid } } = useForm({ 
    mode: "onChange" // 改为onBlur也可，根据需求选择
  });

  useEffect(() => {
    if (isValid) {
      console.log('valid');
    } else {
      console.log('invalid');
    }
  }, [isValid]); // 必须将isValid加入依赖数组

  return (
    <form>
      <input {...register("email", { required: true })} placeholder="输入邮箱" />
    </form>
  );
}

方案2：手动触发验证，绕过handleSubmit的阻断 #

如果需要在提交时判断，不要依赖handleSubmit的回调，而是手动调用trigger执行验证：

import { useForm } from "react-hook-form";

function App() {
  const { register, trigger } = useForm();

  const handleSubmit = async (e) => {
    e.preventDefault();
    // 手动触发所有字段验证
    const isValidForm = await trigger();
    if (isValidForm) {
      console.log('valid');
    } else {
      console.log('invalid');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input {...register("email", { required: true })} placeholder="输入邮箱" />
      <button type="submit">提交</button>
    </form>
  );
}

额外注意点 #

• 若原本代码中使用formState.isValid但未将其加入useEffect的依赖数组，React不会监听它的变化，导致状态更新时无输出。
• 如果表单字段有自定义验证规则，需确保规则正确返回错误信息，否则isValid可能不会正确更新。

内容的提问来源于stack exchange，提问作者Sai Seng