React自定义Input组件调用useForm的register报错不是函数，是否缺导入？

问题根因 #

你在父组件调用自定义Input时，仅将register("email")执行后返回的表单属性（onChange、onBlur、ref等）展开传给了组件，并未将register函数本身作为props传递，因此子组件内读取的register为undefined，调用时就会抛出「不是函数」的报错。

解决方案 #

提供两种可行修改方案，二选一即可：

方案1：调整父组件传参逻辑，子组件代码保持不变 #

修改注册页调用Input的代码，将register函数和name属性单独传入：

<Input 
  placeholder="Email"
  name="email"
  register={register}
  error={errors.email}
/>

该方案无需修改你现有的Input组件实现，内部直接调用register(name)即可正常生成表单绑定属性。

方案2：保留现有父组件调用写法，修改子组件实现 #

你父组件中{...register("email")}已经生成了react-hook-form需要的所有表单绑定属性，直接删掉子组件中调用register的逻辑即可：

import { InputContainer } from "./styles"

function Input({placeholder, error, ...rest}) {
    return (
        <InputContainer isErrored={!!error}>
            <input 
                placeholder={placeholder} 
                {...rest} 
            />
        </InputContainer>
    )
}
export default Input

使用该方案时记得在父组件调用Input时传入error参数：error={errors.email}，用于错误状态展示。

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