MUI DatePicker ist nicht mit Formik kompatibel: date.isBefore ist nicht verfügbar

Question

Ich verwende Formik, um ein Formular in React zu erstellen, und verwende auch MUI-Komponenten.Das Problem ist, dass ich die folgende Fehlermeldung erhalte:

date.isBefore ist keine Funktion
TypeError: date.isBefore ist keine Funktion
    unter DayjsUtils.isBeforeDay (http://localhost:3000/static/js/bundle.js:2319:19)
    am ValidateDate (http://localhost:3000/main.aa62b4b6c891ec5ff2b0.hot-update.js:10596:43)
    bei useValidation (http://localhost:3000/main.aa62b4b6c891ec5ff2b0.hot-update.js:10654:27)
    bei usePickerValue (http://localhost:3000/main.aa62b4b6c891ec5ff2b0.hot-update.js:10019:75)
    bei usePicker (http://localhost:3000/main.aa62b4b6c891ec5ff2b0.hot-update.js:9876:94)
    bei useDesktopPicker (http://localhost:3000/main.aa62b4b6c891ec5ff2b0.hot-update.js:7848:60)
    bei DesktopDatePicker (http://localhost:3000/main.aa62b4b6c891ec5ff2b0.hot-update.js:3956:90)
    bei renderWithHooks (http://localhost:3000/static/js/bundle.js:103306:22)
    bei updateForwardRef (http://localhost:3000/static/js/bundle.js:105877:24)
    bei beginWork (http://localhost:3000/static/js/bundle.js:107924:20)

Das ist mein Code:

<Formik
          onSubmit={handleFormSubmit}
          initialValues={initialValuesProject}
          validationSchema={projectSchema}
        >
          {({ Werte, handleChange, handleSubmit, setFieldValue }) =>
            <form onSubmit={handleSubmit}>
                  <Box width="50%">
                    <LocalizationProvider dateAdapter={AdapterDayjs}>
                      <DatePicker
                        id="project_start"
                        name="project_start"
                        value={values.project_start}
                        SlotProps={{
                          Textfeld: {
                            Größe: „klein“,
                            Rand: "dicht",
                          },
                        }}
                      />
                      <DatePicker
                        id="project_end"
                        name="project_end"
                        value={values.project_end}
                        SlotProps={{
                          textField: { Größe: "klein", Rand: "dicht"
                        }}
                      />
                    </LocalizationProvider>
              </Box>
            </form>
          )}</Formik>

Dies sind der Modus und die Anfangswerte:

const projectSchema = yup.object().shape({
  project_start: yup.date(),
  project_end: yup.date(),
  Projektname: yup.string().required("erforderlich"),
  Benutzer-ID: yup.string(),
  Partner-ID: yup.string(),
  Kategorie-ID: yup.string(),
});

const initialValuesProject = {
  project_start: Date.now(),
  project_end: Date.now(),
  Projektname: "",
  Benutzer-ID: "",
  Partner-ID: "",
  Kategorie-ID: "",
};

Vielen Dank an alle, die mir helfen können <3

Datumsauswahl funktionieren lassen

Answer 1

看起来问题出在这里：

project_start: Date.now(),
project_end: Date.now(),

project_start和project_end的类型应该是Dayjs：

import dayjs, { Dayjs } from 'dayjs';

const initialValuesProject = {
  project_start: dayjs(Date.now()),
  project_end: dayjs(Date.now()),
  project_name: "",
  usersId: "",
  partnerId: "",
  categoryId: "",
};