DatePicker 需要点击 2 次才能更新错误，Formik 和 Yup

Question

我有这个 Material UI DatePicker：

                    <Grid item xs={12}>
                        <LocalizationProvider dateAdapter={AdapterDayjs}>
                            <DatePicker 
                                label="Date of birth" 
                                format="DD/MM/YYYY" 
                                value = {values.dob}

                                sx={{ width: '50%' }}
                                slotProps={{
                                    textField: {
                                    id: 'dob',
                                    helperText: touched.dob ? errors.dob : "",
                                    error: touched.dob && Boolean(errors.dob),
                                    },
                                    }}
                                    onChange={(value) => { 
                                        setFieldValue('dob', value ? dayjs(value).toDate() : null);
                                        setFieldTouched('dob', true); 
                                    }}
                                />
                        </LocalizationProvider>
                    </Grid>

我的问题是我的

DatePicker

只能在第二次起作用。

第一次它说

required

，而不是说

Date of birth cannot be in the future

，然后第二次它说

Date of birth cannot be in the future

。

我总是需要点击两次才能更改它，如果它显示

Date of birth cannot be in the future

，然后我将其更改为昨天，它仍然会显示“出生日期不能是未来”，我需要按示例单击其他内容

textfield name

然后点击其他地方，它就会更新。

如果有人可以帮助我那就太好了。

福米克：

    const { values, errors, touched, handleBlur, handleChange, handleSubmit, setFieldValue, setFieldTouched } = useFormik({
        initialValues: {
            name: "",
            dob: null,
            email: "",
        },   
        validationSchema: formSchema,
        
    });

是的：

export const formSchema = yup.object().shape({
    name: yup.string().matches(nameRules, 'Please enter a valid name').max(40).required("Required"),
    dob: yup.date().max(new Date(), 'Date of birth cannot be in the future').required('Required'), 
    email: yup.string().email("Please enter a valid email").required("Required"),
});

我发现必须单击两次才能更改的是

setFieldTouched('dob', true);

，但如果我删除它，那么我将失去我的helperText。

我期待着一键改变它。

Answer 1

我刚刚发现为什么，

setFieldTouched

需要先来。

onChange={(value) => { 
  setFieldTouched('dob', true);
  setFieldValue('dob', value ? dayjs(value).toDate() : null);
}}

而不是：

onChange={(value) => { 
  setFieldValue('dob', value ? dayjs(value).toDate() : null);
  setFieldTouched('dob', true);
}}