React组件首次本地状态变更时闪烁及react-hook-form验证异常求助

你碰到的这两个问题都是react-hook-form使用中比较典型的状态同步和验证逻辑问题，我来帮你逐一拆解解决：

问题1：组件状态变更时出现闪烁 #

根因 #

你同时维护了本地useState状态（isNoSmartphoneChecked、isPhoneNumberAnonymousChecked）和react-hook-form表单状态，每次切换复选框时，会先更新本地state触发一次重渲染，再调用setValue更新表单状态触发第二次重渲染，两次连续重渲染就会导致视觉上的闪烁。而且这两个状态还可能出现不同步的风险。

解决方案 #

完全移除本地useState，直接从react-hook-form中获取表单状态。可以用watch方法监听表单字段的变化，或者直接从formState.values中读取：

// 移除这两个本地state
// const [isNoSmartphoneChecked, setNoSmartphoneChecked] = useState(false)
// const [isPhoneNumberAnonymousChecked, setPhoneNumberAnonymousChecked] = useState(false)

// 改用watch监听表单字段
const watchNoSmartphone = watch('noSmartphone')
const watchPhoneAnonymous = watch('phoneNumberAnonymous')

然后修改复选框的点击处理函数，不需要再更新本地state，直接操作表单状态：

const handleToggleNoSmartphoneCheckbox = () => {
  // 直接取当前表单值取反
  const currentValue = watch('noSmartphone')
  setValue('noSmartphone', !currentValue)
  clearErrors(['phoneNumber'])
}

const handleToggleAnonymousNumberCheckbox = () => {
  const currentValue = watch('phoneNumberAnonymous')
  setValue('phoneNumberAnonymous', !currentValue)
}

复选框的isChecked直接用watch到的值：

<CustomCheckbox
  isChecked={watchNoSmartphone}
  handleToggleCheckbox={handleToggleNoSmartphoneCheckbox}
  label="我没有可用的智能手机"
  register={register}
  name="noSmartphone"
/>

问题2：onChange模式验证需聚焦失焦后才生效 #

根因 #

1. 你的Controller中rules.required依赖的是外部状态，当状态变化时，没有重新触发验证；
2. react-hook-form的touched状态默认只有在字段被聚焦再失焦后才会标记为touched，所以即使onChange时已经验证出错，errors.phoneNumber存在，但touched.phoneNumber为false，导致错误提示不显示，你误以为验证没生效。

解决方案 #

方案一：让rules依赖表单内部状态，确保规则动态更新

修改Controller的rules，用表单自身的values来判断必填，同时在useForm配置中添加touchOnChange: true，让字段值变化时自动标记为touched：

// 在useForm配置中添加touchOnChange
const { 
  handleSubmit, 
  register, 
  errors, 
  control, 
  setValue, 
  clearErrors, 
  trigger,
  watch,
  formState: { isSubmitting, values, touched }, 
} = useForm<FormData>({
  defaultValues: {
    phoneNumber: null,
    noSmartphone: false,
    phoneNumberAnonymous: false,
    logoChanged: false,
  },
  mode: 'onChange',
  touchOnChange: true, // 关键配置：值变化时自动标记为touched
})

// 修改Controller的rules
<Controller
  name="phoneNumber"
  control={control}
  rules={{ 
    required: {
      value: !watchNoSmartphone,
      message: '手机号为必填项'
    }
  }}
  as={<PhoneInput placeholder={''} autoFormat={false} />}
/>

方案二：手动触发验证，确保状态切换后立即生效

在切换noSmartphone复选框时，手动触发手机号字段的验证，确保规则变化后立即生效：

const handleToggleNoSmartphoneCheckbox = () => {
  const currentValue = watchNoSmartphone
  setValue('noSmartphone', !currentValue)
  clearErrors(['phoneNumber'])
  // 切换后立即触发手机号验证
  trigger('phoneNumber')
}

方案三：调整按钮激活逻辑

原来的判断依赖touched.phoneNumber，结合touchOnChange配置后，可以优化逻辑，让按钮状态更贴合实时验证结果：

// 修改为：勾选无智能手机，或者手机号字段无错误
const isContinueButtonActive = watchNoSmartphone || !errors.phoneNumber

修改后的完整代码示例 #

const MyAccount = ({ handleFormSubmit }) => {
  const { 
    handleSubmit, 
    register, 
    errors, 
    control, 
    setValue, 
    clearErrors, 
    trigger,
    watch,
    formState: { isSubmitting, values }, 
  } = useForm<FormData>({
    defaultValues: {
      phoneNumber: null,
      noSmartphone: false,
      phoneNumberAnonymous: false,
      logoChanged: false,
    },
    mode: 'onChange',
    touchOnChange: true, // 值变化时自动标记为touched
  })

  // 用watch监听表单字段，替代本地state
  const watchNoSmartphone = watch('noSmartphone')
  const watchPhoneAnonymous = watch('phoneNumberAnonymous')

  const onSubmit = handleSubmit((values) => {
    handleFormSubmit(values)
  })

  const handleToggleNoSmartphoneCheckbox = () => {
    const currentValue = watchNoSmartphone
    setValue('noSmartphone', !currentValue)
    clearErrors(['phoneNumber'])
    // 切换后立即触发手机号验证
    trigger('phoneNumber')
  }

  const handleToggleAnonymousNumberCheckbox = () => {
    const currentValue = watchPhoneAnonymous
    setValue('phoneNumberAnonymous', !currentValue)
  }

  // 优化按钮激活逻辑
  const isContinueButtonActive = watchNoSmartphone || !errors.phoneNumber

  return (
    <MyAccountWrapper>
      <UserInfo>
        <Form>
          <FormItem hasError={!!errors.phoneNumber && !watchNoSmartphone}>
            <Label>您的手机号码</Label>
            <Controller
              name="phoneNumber"
              control={control}
              rules={{ 
                required: {
                  value: !watchNoSmartphone,
                  message: '手机号为必填项'
                }
              }}
              as={<PhoneInput placeholder={''} autoFormat={false} />}
            />
          </FormItem>
          <FormItem>
            <CustomCheckbox
              isChecked={watchNoSmartphone}
              handleToggleCheckbox={handleToggleNoSmartphoneCheckbox}
              label="我没有可用的智能手机"
              register={register}
              name="noSmartphone"
            />
          </FormItem>
          <FormItem>
            <CustomCheckbox
              isChecked={watchPhoneAnonymous}
              handleToggleCheckbox={handleToggleAnonymousNumberCheckbox}
              label="我不想向雇主透露我的手机号"
              register={register}
              name="phoneNumberAnonymous"
            />
          </FormItem>
        </Form>
        <ButtonWrapper>
          {isContinueButtonActive && !isSubmitting ? <ActiveBtn onClick={onSubmit} /> : <DisabledBtn />}
        </ButtonWrapper>
      </UserInfo>
    </MyAccountWrapper>
  )
}

export default MyAccount

额外小贴士 #

• 尽量避免同时维护本地state和react-hook-form的表单状态，react-hook-form已经提供了完整的状态管理能力，重复维护只会导致同步问题和不必要的重渲染；
• 当规则依赖其他字段时，使用watch来动态获取依赖字段的值，确保规则实时更新；
• touchOnChange是onChange模式验证的常用配置，能让错误提示更及时，避免用户困惑。

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