react-hook-form报错register is not a function问题排查求助

• 排查useForm调用逻辑
  首先核对报错表单的父组件是否正确从react-hook-form导入useForm，且调用后正确解构出register：

  // 正确示例
  import { useForm } from 'react-hook-form'
  const { register, handleSubmit } = useForm()
  

  注意检查是否存在变量名冲突：是否在同一作用域下声明了同名的register变量覆盖了useForm返回的方法。
• 排查props传递链路
  1. 确认父组件调用Input子组件时，正确将register作为props传递：<Input register={register} name="xxx" />
  2. 确认Input子组件正确接收register props，无拼写错误、漏写：

  // 子组件正确接收示例
  function Input({ register, name }) {
    return <input {...register(name)} />
  }
  

  可在子组件内打印console.log(register)，如果输出为undefined则说明传递链路中断，重点核对props名称是否两端一致。
• 排查多表单实例冲突
  确认两个表单分别调用了独立的useForm生成实例，没有共用同一个register方法，也没有出现某个表单漏调用useForm直接使用register的情况。
• 版本与调用逻辑校验
  确认当前项目使用的react-hook-form版本API匹配：v7及以上版本register为方法，直接调用后返回属性对象即可展开绑定；如果是跨版本升级后出现的问题，检查是否有API兼容问题。
• 交叉验证定位
  把可正常运行的表单代码直接复制替换报错表单的代码，若替换后不再报错，则说明原两个表单的代码存在肉眼未发现的差异，逐行对比变量名、props传递部分即可定位；若替换后仍报错，则排查当前页面的useForm导入语句是否正确。

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