React Formik表单添加日期选择器后出现'Field'未定义错误求助

错误原因 #

1. 组件导入别名错误：你在导入Formik的Field组件时，将其重命名为Formik（import {useField, useFormikContext, Field as Formik} from 'formik';），但在日期选择器的JSX代码中却使用了未定义的<Field>标签，这是直接导致「'Field' is not defined」错误的原因。
2. 拼写错误：代码里存在多处拼写问题，比如remakrs应为remarks，csutomerCode/csutomerName应为customerCode/customerName，这些错误会导致表单字段与验证Schema不匹配，后续可能引发验证失效等问题。

修正后的完整代码 #

import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';
// 修正导入别名：将Field重命名为Field，或者直接使用原名
import {useField, useFormikContext, Field, Formik} from 'formik';
import * as yup from 'yup';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import './FormComponent.css';

export default function FormComponent() {
  const { setFieldValue } = useFormikContext();

  const DateField  = ({ ...props }) => {
    const [field] = useField(props);
    return (
      <DatePicker
        {...field}
        {...props}
        selected={(field.value && new Date(field.value)) || null}
        onChange={(val) => setFieldValue(field.name, val)}
      />
    );
  };

  // 修正拼写错误
  const schema = yup.object().shape({
    grnNumber: yup.string().trim().required('GRN Number is required'),
    selectedDate: yup.date().required('Date is required'),
    remarks: yup.string().required('Remarks is required'),
    customerCode: yup.string().required('Customer Code is required'),
    customerName: yup.string().required('Customer Name is required'),
  });

  return (
    <div className='form'>
      <Formik
        validationSchema={schema}
        onSubmit={(values) => console.log(values)}
        initialValues={{
          grnNumber: '',
          selectedDate: null,
          remarks: '',
          customerCode: '',
          customerName: '',
        }}
      >
        {({ handleSubmit, handleChange, values, touched, errors, setFieldValue }) => (
          <Form noValidate onSubmit={handleSubmit}>
            <Form.Group controlId="validationFormik01">
              <Form.Label>GRN Number</Form.Label>
              <Form.Control
                type="text"
                placeholder="GRN Number"
                name="grnNumber"
                value={values.grnNumber}
                onChange={handleChange}
                isInvalid={!!errors.grnNumber}
              />
              <Form.Control.Feedback type="invalid">
                {errors.grnNumber}
              </Form.Control.Feedback>
            </Form.Group>

            <Form.Group controlId="validationFormikDate">
              <Form.Label>GRN Date</Form.Label>
              {/* 使用正确的Field组件 */}
              <Field name="selectedDate" as={DateField} className="form-control" />
              {touched.selectedDate && errors.selectedDate && (
                <Form.Control.Feedback type="invalid">
                  {errors.selectedDate}
                </Form.Control.Feedback>
              )}
            </Form.Group>

            {/* 补充其他字段的渲染 */}
            <Form.Group controlId="validationFormikRemarks">
              <Form.Label>Remarks</Form.Label>
              <Form.Control
                type="text"
                placeholder="Remarks"
                name="remarks"
                value={values.remarks}
                onChange={handleChange}
                isInvalid={!!errors.remarks}
              />
              <Form.Control.Feedback type="invalid">
                {errors.remarks}
              </Form.Control.Feedback>
            </Form.Group>

            <Form.Group controlId="validationFormikCustomerCode">
              <Form.Label>Customer Code</Form.Label>
              <Form.Control
                type="text"
                placeholder="Customer Code"
                name="customerCode"
                value={values.customerCode}
                onChange={handleChange}
                isInvalid={!!errors.customerCode}
              />
              <Form.Control.Feedback type="invalid">
                {errors.customerCode}
              </Form.Control.Feedback>
            </Form.Group>

            <Form.Group controlId="validationFormikCustomerName">
              <Form.Label>Customer Name</Form.Label>
              <Form.Control
                type="text"
                placeholder="Customer Name"
                name="customerName"
                value={values.customerName}
                onChange={handleChange}
                isInvalid={!!errors.customerName}
              />
              <Form.Control.Feedback type="invalid">
                {errors.customerName}
              </Form.Control.Feedback>
            </Form.Group>

            <Button type="submit">Submit</Button>
          </Form>
        )}
      </Formik>
    </div>
  )
}

其他集成日期选择器的方式 #

如果不想自定义DateField组件，也可以直接在Formik的渲染回调中使用DatePicker，手动关联表单值和更新方法：

// 在Formik的render回调中替换日期选择器部分
<Form.Group controlId="validationFormikDate">
  <Form.Label>GRN Date</Form.Label>
  <DatePicker
    selected={values.selectedDate}
    onChange={(date) => setFieldValue('selectedDate', date)}
    className="form-control"
  />
  {touched.selectedDate && errors.selectedDate && (
    <Form.Control.Feedback type="invalid">
      {errors.selectedDate}
    </Form.Control.Feedback>
  )}
</Form.Group>

这种方式更直观，不需要额外封装组件，适合简单场景。

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