MUI DatePicker 无法与 Formik 一起使用（date.isBefore 不是函数）

Question

我正在使用 Formik 在 React 中制作表单，我还使用 MUI 组件。发生的情况是我收到以下错误：

date.isBefore is not a function
TypeError: date.isBefore is not a function
    at DayjsUtils.isBeforeDay (http://localhost:3000/static/js/bundle.js:2319:19)
    at validateDate (http://localhost:3000/main.aa62b4b6c891ec5ff2b0.hot-update.js:10596:43)
    at useValidation (http://localhost:3000/main.aa62b4b6c891ec5ff2b0.hot-update.js:10654:27)
    at usePickerValue (http://localhost:3000/main.aa62b4b6c891ec5ff2b0.hot-update.js:10019:75)
    at usePicker (http://localhost:3000/main.aa62b4b6c891ec5ff2b0.hot-update.js:9876:94)
    at useDesktopPicker (http://localhost:3000/main.aa62b4b6c891ec5ff2b0.hot-update.js:7848:60)
    at DesktopDatePicker (http://localhost:3000/main.aa62b4b6c891ec5ff2b0.hot-update.js:3956:90)
    at renderWithHooks (http://localhost:3000/static/js/bundle.js:103306:22)
    at updateForwardRef (http://localhost:3000/static/js/bundle.js:105877:24)
    at beginWork (http://localhost:3000/static/js/bundle.js:107924:20)

这是我的代码：

<Formik
          onSubmit={handleFormSubmit}
          initialValues={initialValuesProject}
          validationSchema={projectSchema}
        >
          {({ values, handleChange, handleSubmit, setFieldValue }) => (
            <form onSubmit={handleSubmit}>
                  <Box width="50%">
                    <LocalizationProvider dateAdapter={AdapterDayjs}>
                      <DatePicker
                        id="project_start"
                        name="project_start"
                        value={values.project_start}
                        slotProps={{
                          textField: {
                            size: "small",
                            margin: "dense",
                          },
                        }}
                      />
                      <DatePicker
                        id="project_end"
                        name="project_end"
                        value={values.project_end}
                        slotProps={{
                          textField: { size: "small", margin: "dense" },
                        }}
                      />
                    </LocalizationProvider>
              </Box>
            </form>
          )}
        </Formik>

这是架构和初始值：

const projectSchema = yup.object().shape({
  project_start: yup.date(),
  project_end: yup.date(),
  project_name: yup.string().required("required"),
  usersId: yup.string(),
  partnerId: yup.string(),
  categoryId: yup.string(),
});

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

我非常感谢任何可以帮助我的人<3

能够使日期选择器工作

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: "",
};