React Hook Form onchange模式下isValid未定义报错解决方法

错误核心原因 #

• 最常见的问题是解构取错了层级：isValid 根本不在 useForm() 返回的根对象上，是藏在返回值里的formState对象下的属性，直接从根层级解构拿到的就是undefined，再读属性自然抛出类型错误。
• 要是拆分了组件、用useFormContext()拿表单状态，上层没套FormProvider的话，整个上下文返回值都是undefined，读formState.isValid一样会报错。
• 配置项里写的mode: 'onchange'拼写不符合规范，React Hook Form识别的是驼峰写法onChange（C大写），这个问题虽然不会直接导致isValid为undefined，但会让实时校验不触发，按钮禁用状态跟不上输入变化，很容易和其他问题叠加出bug。

修复方案 #

• 修正解构层级，从formState中读取isValid，同时把mode配置改成正确的驼峰格式
  错误写法示例：

  // 错误：根层级不存在isValid属性
  const { register, handleSubmit, isValid } = useForm({
    mode: 'onchange' // 配置值拼写错误，校验不会实时触发
  })
  
  // 这里读取undefined的属性直接抛错
  <button disabled={!isValid}>提交</button>
  

  正确写法示例：

  const {
    register,
    handleSubmit,
    // 从formState内解构需要的状态
    formState: { isValid, errors }
  } = useForm({
    mode: 'onChange', // 注意大写C，符合框架配置规范
    defaultValues: { /* 给所有字段匹配初始值，保证初始校验计算准确 */ }
  })
  
  // 按钮禁用逻辑可正常跟随校验状态更新
  <button disabled={!isValid}>提交</button>
  

• 跨组件共享表单状态时，必须在上层包裹FormProvider透传表单实例
  错误写法示例：

  // 父组件：未包裹FormProvider
  const formMethods = useForm({mode: 'onChange'})
  return (
    <form onSubmit={formMethods.handleSubmit(submit)}>
      <ChildInput /> {/* 子组件内部通过useFormContext取状态 */}
    </form>
  )
  
  // 子组件
  function ChildInput() {
    // 上层无Provider，这里拿到的上下文是undefined
    const { register, formState: { isValid } } = useFormContext()
    return <input {...register('username', {required: true})} />
  }
  

  正确写法示例：

  // 父组件：包裹FormProvider并透传所有表单方法
  const formMethods = useForm({mode: 'onChange'})
  return (
    <FormProvider {...formMethods}>
      <form onSubmit={formMethods.handleSubmit(submit)}>
        <ChildInput />
        <button disabled={!formMethods.formState.isValid}>提交</button>
      </form>
    </FormProvider>
  )
  

额外注意点 #

不要靠formState?.isValid这种可选链写法临时兜底，本质是配置或解构逻辑写错了，兜底写法只会让状态更新问题更难排查。如果需要表单首次渲染就计算出准确的isValid值，要给所有配置了校验规则的字段在defaultValues中设置对应类型的初始值（比如文本输入框初始值设为空字符串，数字输入框初始值设为0或null），避免初始校验状态计算异常。

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