React Native中Formik结合Yup如何校验useRef绑定的出生日期字段

问题原因 #

你将useRef返回的完整ref对象直接绑定给了Formik的dob字段，而你配置的Yup校验规则要求dob为字符串类型。ref本质是包含current属性的对象，因此触发了类型不匹配的报错。

解决方案 #

完全使用Formik托管出生日期字段的状态即可，不需要额外用useRef存储，修改步骤如下：

• 把原来存在ref里的出生日期初始值转移到Formik的initialValues配置中
• 在日期选择器的onChange回调中，选择完日期后调用Formik的setFieldValue方法同步更新Formik中dob字段的值
• 界面显示出生日期时直接读取formikProps.values.dob

修改后代码示例 #

Formik初始化配置

// 原有Formik初始化部分增加dob初始值
<Formik
  initialValues={{
    // 其他表单字段初始值...
    dob: "Birth Date"
  }}
  validationSchema={yup.object({
    // 其他字段校验规则...
    dob: yup.string().required("required")
  })}
  onSubmit={values => {
    // 原有提交逻辑
  }}
>
{formikProps => (
  // 原有表单UI部分
)}
</Formik>

出生日期组件部分

{/* Date Of Birth */}
<View>
  <TouchableOpacity onPress={showDatepicker}>
    <View>
      <Text>{formikProps.values.dob}</Text>
    </View>
  </TouchableOpacity>

  <View>
    {showDOB && (
      <View style={{ marginBottom: 25 }}>
        <DateTimePicker 
          testID="dateTimePicker" 
          value={date} 
          mode="date" 
          is24Hour={false} 
          display="spinner" 
          onChange={(event, selectedDate) => {
            // 保留你原有onChange的逻辑
            onChange(event, selectedDate);
            // 新增：同步更新Formik的dob字段值，日期格式可自行调整
            if (selectedDate) {
              const formattedDob = `${selectedDate.getDate()} ${selectedDate.toLocaleString('default', { month: 'long' })}`;
              formikProps.setFieldValue('dob', formattedDob);
            }
          }} 
          dateFormat="day month" 
        />
      </View>
    )}
  </View>
</View>
<Text style={{ color: "#FF6B6B" }}>{formikProps.errors.dob}</Text>

修改完成后原有Yup校验规则不需要调整，即可正常触发校验。

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