时间戳

首页 > 解决方案 > Null 被设置为 Formik 中空字符串的初始值，而反应原生中的 Yup 表单验证

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

问题描述

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

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]} />
        </>
    );
}

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

职业必须是“字符串”类型，但最终值为“空”。

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

标签： react-nativeformikyup

解决方案

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

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

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

推荐阅读