MUI DatePicker는 Formik과 호환되지 않습니다. date.isBefore를 사용할 수 없습니다.

Question

저는 Formik을 사용하여 React에서 양식을 만들고 MUI 구성 요소도 사용하고 있습니다.문제는 다음과 같은 오류가 발생한다는 것입니다.

date.isBefore는 함수가 아닙니다.
TypeError: date.isBefore는 함수가 아닙니다.
    DayjsUtils.isBeforeDay (http://localhost:3000/static/js/bundle.js:2319:19)
    유효성 검사 날짜(http://localhost:3000/main.aa62b4b6c891ec5ff2b0.hot-update.js:10596:43)
    useValidation에서 (http://localhost:3000/main.aa62b4b6c891ec5ff2b0.hot-update.js:10654:27)
    usePickerValue (http://localhost:3000/main.aa62b4b6c891ec5ff2b0.hot-update.js:10019:75)
    usePicker에서 (http://localhost:3000/main.aa62b4b6c891ec5ff2b0.hot-update.js:9876:94)
    useDesktopPicker (http://localhost:3000/main.aa62b4b6c891ec5ff2b0.hot-update.js:7848:60)
    DesktopDatePicker에서 (http://localhost:3000/main.aa62b4b6c891ec5ff2b0.hot-update.js:3956:90)
    renderWithHooks에서 (http://localhost:3000/static/js/bundle.js:103306:22)
    updateForwardRef에서 (http://localhost:3000/static/js/bundle.js:105877:24)
    BeginWork(http://localhost:3000/static/js/bundle.js:107924:20)

내 코드는 다음과 같습니다.

<Formik
          onSubmit={handleFormSubmit}
          초기값={초기값프로젝트}
          유효성 검사 스키마={projectSchema}
        >
          {({ 값, handlerChange, handlerSubmit, setFieldValue }) =>
            <onSubmit={handleSubmit} 형식>
                  <상자 너비="50%">
                    <LocalizationProvider dateAdapter={AdapterDayjs}>
                      <날짜 선택기
                        id="project_start"
                        name="project_start"
                        값={values.project_start}
                        슬롯Props={{
                          텍스트 필드: {
                            크기: "작음",
                            여백: "빽빽함",
                          },
                        }}
                      />
                      <날짜 선택기
                        id="project_end"
                        name="project_end"
                        값={values.project_end}
                        슬롯Props={{
                          textField: { 크기: "작음", 여백: "빽빽함" },
                        }}
                      />
                    </현지화 제공자>
              </박스>
            </양식>
          )}</Formik>

모드와 초기값은 다음과 같습니다.

const projectSchema = yup.object().shape({
  project_start: yup.date(),
  project_end: yup.date(),
  프로젝트_이름: yup.string().required("필수"),
  사용자 ID: yup.string(),
  파트너 ID: yup.string(),
  카테고리ID: yup.string(),
});

constinitialValuesProject = {
  project_start: Date.now(),
  project_end: Date.now(),
  프로젝트_이름: "",
  사용자 ID: "",
  파트너 ID: "",
  카테고리 ID: "",
};

저를 도와주실 수 있는 모든 분들께 감사드립니다 <3

날짜 선택기가 작동하도록 할 수 있습니다

Answer 1

여기에 문제가 있는 것 같습니다.

으아악

project_start 및 project_end 유형은 Dayjs여야 합니다.

으아악