Null 被设置为 Formik 中空字符串的初始值，而反应原生中的 Yup 表单验证

Posted 2023-02-21

【中文标题】Null 被设置为 Formik 中空字符串的初始值，而反应原生中的 Yup 表单验证

【英文标题】：Null is getting set as initial value for empty string in Formik and Yup form validation in react native

【发布时间】：2021-12-24 15:50:34

【问题描述】：

在我的简单表单中，这是我的验证模式：

const validationSchema = Yup.object().shape(
    firstName: Yup.string().required().min(2).label('First Name'),
    lastName: Yup.string().required().min(2).label('Last Name'),
    email: Yup.string("Please enter valid email address").email("Please enter valid email address").label("Email address"),
    profession: Yup.string("Please enter your profession")
);

如果现有用户为空，我将初始值设置为空字符串。像这样：

                    initialValues=
                        firstName: currentUser ? currentUser.firstName : "",
                        lastName: currentUser ? currentUser.lastName : "",
                        email: currentUser ? currentUser.email : "",
                        profession: currentUser ? currentUser.profession : ""
                    

这是我处理每个输入的 FormField 组件。

function AppFormField( name, width, ...otherProps ) 
    const  setFieldTouched, setFieldValue, values, errors, touched  = useFormikContext();
    return (
        <>
            <AppTextInput
                onBlur=() => setFieldTouched(name)
                onChangeText=text => setFieldValue(name, text)
                width=width
                value=values[name]
                ...otherProps
            />
            <ErrorMessage error=errors[name] visible=touched[name] />
        </>
    );

如果我触摸空白字段并放置一些东西（即使稍后将其设为空），一切都会正常工作，但是，如果我不触摸并在电子邮件或专业字段上输入任何内容并尝试提交表单，则会出现以下错误：

Professional 必须是 'string' 类型，但最终值为 'null'。

我不明白为什么将空字符串更改为 null 以及如何将此字段作为可选字段工作，即使 touch 为 false。 这是一个示例屏幕截图

【参考方案1】：

我终于解决了这个问题。 Null 来自嵌套属性。不知何故，在初始化值时它还没有准备好。所以修复是这样的：

                        initialValues=
                        firstName: currentUser?.firstName ? currentUser.firstName : "",
                        lastName: currentUser?.lastName ? currentUser.lastName : "",
                        email: currentUser?.email ? currentUser.email : "",
                        profession: currentUser?.profession ? currentUser.profession : ""
                    

只需检查嵌套属性值是否为空。就是这样。