React Hook Form通过value={value}给输入框赋值时消除必填报错的方法

手动给输入框绑定value属性时，没有同步更新React Hook Form（下简称RHF）内部维护的表单状态，导致RHF读取到的对应字段值始终为空，触发必填校验报错。

按你的实际使用场景选择对应方案即可： #

场景1：赋值为固定初始值 #

直接在初始化useForm时通过defaultValues配置字段初始值即可，无需手动给输入框绑定value属性：

import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';

const { register, handleSubmit } = useForm({
  resolver: yupResolver(validationSchema),
  // 配置所有字段初始值
  defaultValues: {
    first_name: '你的初始值',
  }
});

// 输入框直接展开register返回的属性即可
<StyledInput
  {...register(name)}
  maxLength={100}
/>

场景2：赋值为后续动态变化的外部值 #

如果value是后续异步获取（比如接口返回）或者随其他状态变化的动态值，使用RHF提供的setValue方法同步更新内部状态：
首先从useForm导出setValue：

const { register, handleSubmit, setValue } = useForm({
  resolver: yupResolver(validationSchema)
});

监听外部value变化，调用setValue同步到RHF：

import { useEffect } from 'react';

// 当外部value变化时同步到RHF
useEffect(() => {
  // 第三个参数可配置是否触发校验、是否更新脏状态等
  setValue(name, value, { shouldValidate: true });
}, [value, name, setValue]);

// 输入框代码保持正常写法
<StyledInput
  {...register(name)}
  maxLength={100}
/>

场景3：自定义输入框组件需要完全受控 #

如果你的StyledInput是完全自定义的受控组件，更推荐使用RHF的Controller组件做封装，自动完成值的同步：

import { Controller } from 'react-hook-form';

const { control, handleSubmit } = useForm({
  resolver: yupResolver(validationSchema)
});

<Controller
  name={name}
  control={control}
  defaultValue={value}
  render={({ field }) => (
    <StyledInput
      {...field}
      maxLength={100}
      onChange={(e) => {
        field.onChange(e);
        // 可追加自定义onChange逻辑
      }}
    />
  )}
/>

注意：需提前安装@hookform/resolvers依赖来绑定Yup校验规则，否则你定义的schema不会生效。

内容的提问来源于stack exchange，提问作者some nooby questions