React Hook Form表单提交时所有输入值均为undefined问题求助

核心问题 #

你遇到的问题是没有让React Hook Form（RHF）接管表单字段的状态管理，直接给输入框绑定user?.name会绕过RHF的状态追踪机制，导致提交时无法获取到字段值。

修复步骤 #

1. 通过useForm配置初始值
   在初始化useForm时，通过defaultValues传入表单字段的初始值，让RHF管理这些状态：

   const { control, handleSubmit, register, formState: { errors } } = useForm({
     defaultValues: {
       name: user?.name || '',
       cpf: user?.cpf || '',
       email: user?.email || '',
       senha: '',
       senha_confimation: ''
     }
   });
   

2. 修改Controller的输入框绑定
   Controller组件的输入框必须使用field.value作为value值，而不是直接引用user?.name，这样RHF才能追踪字段的变化：

   <Controller
     control={control}
     rules={{ required: false }}
     name="name"       
     render={({ field: { value, onChange } }) => (
       <View className="relative">
         <View className="absolute top-2 left-2 w-10 h-10 z-10">
           <AntDesign name="user" size={24} color="#D2D6DA" />
         </View>
         <TextInput
           placeholder="Seu nome"
           className="border-[1px]"
           value={value} // 改用RHF维护的field.value
           onChangeText={onChange}
         />
       </View>
     )}
   />
   

额外检查 #

其他字段（如cpf、email等）也需要遵循同样的规则：要么用Controller组件并绑定field.value和onChange，要么用register方法注册输入框，确保RHF能正确追踪所有字段的状态。

内容的提问来源于stack exchange，提问作者Jorge Edo. Hernandez