DatePicker组件无法集成Yup验证，Formik Field包裹后无法渲染

问题核心是你把Formik的状态和自定义useState混在了一起，且直接用<Field>包裹MUI DatePicker的方式不对——MUI DatePicker不是标准表单控件，需要和Formik的字段做适配。

修正步骤： #

• 移除自定义状态：Formik已帮你管理表单状态，不需要fieldDate和setFieldDate。
• 用Field的render属性适配DatePicker：通过Field的render回调获取Formik的字段方法，绑定到DatePicker上。
• 关联Formik状态与验证：让DatePicker的值直接读取Formik的values.date，变更时调用setFieldValue同步状态，确保Yup能拿到正确值做验证。
• 添加错误提示：用Formik的ErrorMessage组件显示验证错误。

完整修正代码： #

import React from "react";
import { Formik, Form, Field, ErrorMessage } from "formik";
import { FormContainer, FieldContainer, SubmitButton } from "../GlobalStyle";
import { TextField } from "@mui/material";
import * as Yup from "yup";

import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import DateFnsUtils from "@date-io/date-fns";
import { DatePicker } from '@mui/x-date-pickers/DatePicker';

const dateSchema = Yup.object().shape({
  date: Yup.date().required('Date is required'),
});

const initialValues = { date: null }; // 日期初始值用null更匹配DatePicker的空状态

export default function YourFormComponent() {
  return (
    <div>
      <FormContainer>
        <Formik
          initialValues={initialValues}
          validationSchema={dateSchema}
          onSubmit={(values) => {
            console.log("提交的值:", values);
          }}                
        >
          {({ isSubmitting, values, setFieldValue, errors, touched }) => (
            <Form className="form">
              <LocalizationProvider dateAdapter={DateFnsUtils}>
                <Field name="date">
                  {({ field }) => (
                    <DatePicker
                      label="Date"
                      value={values.date}
                      onChange={(newValue) => {
                        setFieldValue(field.name, newValue);
                      }}
                      renderInput={(params) => (
                        <TextField 
                          {...params} 
                          error={touched.date && !!errors.date}
                          helperText={<ErrorMessage name="date" />}
                        />
                      )}
                    />
                  )}
                </Field>
              </LocalizationProvider>
              <div className="buttonWrapper">          
                <SubmitButton type="submit" className="SubmitButton" disabled={isSubmitting}>
                  Submit
                </SubmitButton>           
              </div>
            </Form>
          )}
        </Formik>
      </FormContainer>
    </div>
  );
}

关键说明： #

• 初始值设为null：MUI DatePicker的空值状态对应null，而非空字符串，组件能正确识别空状态。
• Field的render回调：通过({ field })拿到Formik的字段配置，用setFieldValue同步日期变更到Formik状态中。
• 错误状态关联：在TextField上绑定error和helperText，既显示Yup的验证错误，也触发MUI的错误样式。
• 依赖Formik状态管理：完全移除独立state，确保验证逻辑能获取到最新的日期值。

修改后，DatePicker可正常渲染，Yup的验证流程也能正常工作，提交时会检查日期是否必填。

内容的提问来源于stack exchange，提问作者Glenncito