React Hook Form首次报错后无法再次验证表单问题求助

问题根源 #

你通过setError添加了未在表单中注册的loginFail字段错误，React Hook Form会将这类错误计入表单整体校验状态。当你重新填写表单提交时，即使输入字段本身校验通过，残留的loginFail错误仍会让表单处于校验不通过状态，导致onValid回调（登录API调用逻辑）无法触发。

可行解决方案 #

方案1：输入字段变化时清除自定义错误 #

给账号、密码这类核心输入字段添加onChange事件，触发时清除loginFail错误，确保用户修改内容后表单能回到正常校验状态：

// 示例：给用户名输入框绑定事件
<input
  {...register('username')}
  onChange={(e) => {
    // 先执行React Hook Form自带的onChange逻辑
    register('username').onChange(e);
    // 清除自定义的登录失败错误
    clearErrors('loginFail');
  }}
/>

// 密码输入框同理
<input
  {...register('password')}
  onChange={(e) => {
    register('password').onChange(e);
    clearErrors('loginFail');
  }}
/>

方案2：提交前先清除自定义错误 #

在onValid函数最开始手动清除loginFail错误，避免残留错误阻塞后续流程：

const onValid = async (data) => {
    // 提交前先清除上一次的登录失败错误
    clearErrors('loginFail');
    const res = await SignIn(data);
    if (res.data.result) {
        const result = setSessionKey(res.data.loginInfo.sessionKey);
        console.log(result);
        clearErrors();
    } else {
        setError('loginFail', { message: 'login failed' });
    }
};

方案3：将错误绑定到已有表单字段 #

如果不需要独立的错误提示字段，可以把登录失败的错误绑定到用户名或密码字段上，这样用户修改对应字段时，React Hook Form会自动清除该字段的错误，无需额外处理：

// 替换原来的setError逻辑
setError('username', { message: '账号或密码错误' });

内容的提问来源于stack exchange，提问作者jaehyuk kim