Null 被设置为 Formik 中空字符串的初始值和 React Native 中的 Yup 表单验证

Question

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

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

如果我触摸空白字段并放置一些东西（即使稍后将其清空），一切正常，但是，如果我不触摸并在电子邮件或专业字段中输入任何内容并尝试提交它给出的表格以下错误：

Profession must be a 'string' type, but the final value was 'null'.

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

Answer 1

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

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

还要检查嵌套的属性值是否为空。就是这样。

Null 被设置为 Formik 中空字符串的初始值和 React Native 中的 Yup 表单验证

Null is getting set as initial value for empty string in Formik and Yup form validation in react native

react-native

yup

formik