使用NativeBase+React Hook Form时动态填充表单项未触发验证如何解决

• 你当前为输入框绑定的value是自行维护的formData.customer，而非React Hook Form（下简称RHF）通过Controller返回的受控value，RHF无法感知你外部自定义状态的变化，二者状态不同步
• 选择联系人填充时仅更新了自定义的formData，没有调用RHF提供的更新方法同步字段值，自然不会触发内置的校验规则

1. 导出RHF的手动操作方法 #

从useForm的返回值中新增导出setValue，该方法可手动更新RHF管理的表单字段值，同时支持配置是否自动触发校验：

const {
  control,
  handleSubmit,
  formState: { errors },
  setValue, // 新增导出
} = useForm();

2. 统一输入框的受控源 #

将Input的value属性改为绑定Controller返回的value，避免双状态不同步：

// 原代码：value={formData.customer}
// 修改为：
<Input
  value={value} // 直接用Controller render参数提供的field.value
  // 其余属性保持不变
  ...
/>

如果你确实需要自行维护formData状态，保持现有的onChangeText逻辑即可，不影响正常功能。

3. 联系人选择后同步更新并触发校验 #

在你的联系人选择确认回调中，调用setValue更新RHF的customer字段值，开启shouldValidate配置即可自动触发校验规则：

// 假设该方法为选中联系人后的回调函数，selectedPhone为选中的手机号
const handleContactSelect = (selectedPhone) => {
  // 更新RHF字段值，开启自动校验
  setValue('customer', selectedPhone, {
    shouldValidate: true, // 更新后立即触发该字段的校验规则
    shouldDirty: true
  })
  // 同步自定义的formData（如果需要）
  setFormData(prev => ({
    ...prev,
    customer: selectedPhone
  }))
  // 关闭联系人弹窗
  setData(prev => ({
    ...prev,
    isVisibleShowContacts: false
  }))
}

你可以完全移除自定义的formData状态，所有表单字段的状态都由RHF统一管理，需要取值时可以用getValues('customer')或者watch('customer')获取，避免双状态维护带来的同步问题。

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