我这几天遇到了一些问题,我在 Formik 表单的 onSubmit 方法中设置的每个错误都没有添加到错误属性中。我的具体问题是关于 GraphQL API 返回的后端错误。我的表格很长,所以我不会发布所有代码,但相关代码如下:
这是我的表格的一个片段:
<Formik
initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={onSubmit}
>
{({ errors, setFieldValue, touched, values }) => (
<>
{console.log(errors)}
<Form>
<div className="divided-by-2">
<div className="street-number-and-street">
<FormikTextField
id="streetNumber"
name="streetNumber"
label={i18next.t('model:traveler.streetNumber')}
/>
<FormikTextField
id="street"
name="street"
label={i18next.t('model:traveler.street')}
/>
</div>
<FormikTextField
id="city"
name="city"
label={i18next.t('model:traveler.city')}
/>
<FormikTextField
id="zip"
name="zip"
label={i18next.t('model:traveler.postCode')}
/>
</div>
</Form>
</>
)}
</Formik>
onSubmit 是我在 Formik 声明之外声明的函数,因为它非常广泛。情况如下:
const onSubmit = async (values, actions) => {
const variables = {
firstname: values.firstname,
lastname: values.lastname,
[The rest of my variables are also here including the ones in the above snippet]
}
const { data } = await profileUpdate({
variables,
});
if (data.userUpdate.errors.length === 0) {
const { data } = await usersRoleRequestCreate({
variables: {
role: 'explorer',
note: values.note,
token,
},
});
if (data?.usersRoleRequestCreate?.errors.length > 0) {
for (const error of data?.usersRoleRequestCreate?.errors) {
console.log(error.attribute);
const key = Mapping[error.attribute];
if (key) {
let message = '';
for (const errorMessage of error.errors) {
message += errorMessage.message;
}
actions.setFieldError(key, message)
}
}
} else {
[If no errors, success code here]
}
}
}
我尝试使用 setFieldError (如此处所示),但我也尝试使用 setErrors,使用 useState 创建一个对象来存储我的后端验证错误,然后将这些值分配给错误,所有这些都不成功。错误具有值的唯一事件是当我从 yup 验证模式收到前端错误时。 Formik 文档没有提供很多示例(https://formik.org/docs/api/formik)我真的想不通。
感谢您的帮助