React Hook Form传register给子组件报'register is not a function'解决方法

数据老陈

2026-8-3

解决React Hook Form中'register is not a function'错误

错误核心原因

这个错误说明子组件接收到的register并非函数，问题出在父组件useForm的调用、register的传递环节，或是违反了React Hook的使用规则。

具体解决步骤

1. 检查父组件`useForm`的基础使用

确保已正确导入useForm：

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

严格遵守Hook规则：useForm必须在函数组件的顶层作用域调用，不能放在条件判断、循环或嵌套函数内部，否则会导致Hook返回值异常。

2. 验证`register`的传递有效性

在父组件中临时添加日志，确认register的类型：
```
const { register } = useForm();
console.log(typeof register); // 正常应输出"function"
```
如果输出不是function，检查useForm的调用是否符合规则，或是确认已安装正确版本的React Hook Form。
子组件接收props时，确保register的名称拼写完全一致，避免因重命名或拼写错误导致接收异常。

3. 修正子组件Checkbox的绑定逻辑（顺带优化功能）

原代码中Checkbox的value写死为字符串"status?.name"，会导致提交数据不是实际状态名称；同时多个Checkbox需要配置数组模式才能正确收集多选值：

const CheckboxFilter = ({ status, register }) => {
  return (
    <p className='text-[#858585] mt-2 text-[14px]' >
      <label htmlFor={status.name} className='cursor-pointer' >
        <input 
          {...register("checkBoxData", { valueAsArray: true })} 
          type="checkbox" 
          id={status.name} 
          value={status.name} 
        /> 
        {status.name}
      </label>
    </p>
  );
};

通过{ valueAsArray: true }配置，React Hook Form会自动将选中的Checkbox值收集为数组，提交时data.checkBoxData即为所有选中状态名称组成的数组。