React-Hook-Form useFormContext表单错误无法实时更新问题求助

问题解决方法 #

核心原因

你遇到的问题根源在于react-hook-form默认的验证模式（mode）为onSubmit，该模式下仅在表单提交时才会触发验证并更新formState.errors，而isValid作为表单整体有效性的计算属性，会实时追踪字段状态变化，因此能正常更新。

解决方案1：修改验证模式

在Form组件的useForm配置中添加mode选项，将验证时机改为onChange或onBlur，这样验证会在输入变化/失去焦点时自动触发，errors对象也会同步更新：

import { FormProvider, useForm } from "react-hook-form";
import { TextInput } from "./TextInput";
import { Submit } from "./Submit";

export const Form = ({ onSubmit, initialValues }) => {
  const methods = useForm({ 
    defaultValues: initialValues,
    mode: "onChange" // 可选值："onBlur" / "onChange"，按需选择
  });
  const submitFunction = methods.handleSubmit(onSubmit);
  return (
    <FormProvider {...methods}>
      <form onSubmit={submitFunction}>
        <div>
          <div>
            <TextInput
              name="name"
              placeholder="Name"
            />
          </div>
        </div>
        <Submit
          onClick={submitFunction}
          isFormValid={methods.formState.isValid}
        />
      </form>
    </FormProvider>
  );
};

解决方案2：优化错误获取逻辑

formState.errors是react-hook-form提供的代理对象，直接通过errors[name]访问即可，无需使用lodash.get，避免因工具函数导致的状态追踪失效问题：

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

export const TextInput = ({
  name,
  placeholder,
  disabled = false,
}) => {
  const { register, formState: { errors } } = useFormContext();
  const field = register(name, {
    maxLength: { value: 5, message: "Too Long" },
  });

  const error = errors[name];
  const label = error ? <label>{error.message}</label> : null;
  return (
    <div>
      <input
        data-testid={`form-input-${name}`}
        type="text"
        autoComplete="off"
        placeholder={placeholder}
        readOnly={disabled}
        {...field}
      />
      {label}
    </div>
  );
};

说明

• 选择mode: "onChange"会在每次输入变化时触发验证，适合需要实时反馈错误的场景；mode: "onBlur"则在输入框失去焦点时触发验证，减少不必要的计算。
• 直接访问errors[name]能确保组件正确订阅到错误状态的变化，触发重渲染展示错误信息。

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