React Formik 表单“字段”未定义

Question

我正在创建一个反应 Formik 表单，一切正常，直到我将日期选择器放入表单中，然后出现一些错误，但是当我解决错误时，这个 [“字段”未定义] 是否有任何错误或任何其他方法添加日期选择器。我添加了其他字段，这些字段工作正常，包括当我使用日期选择器时似乎出现验证部分问题。这是我的完整代码

import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';
import {useField, useFormikContext, Field as 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'),
    remakrs: yup.string().required(),
    csutomerCode: yup.string().required(),
    csutomerName: yup.string().required(),
  });

  return (
    <div className='form'>
      <Formik
      validationSchema={schema}
      onSubmit={console.log}
      initialValues={{
        grnNumber: '',
        selectedDate: null,
        remakrs: '',
        csutomerCode: '',
        csutomerName: '',
      }}
    >
      {({ handleSubmit, handleChange, values, touched, errors }) => (
        <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 name="selectedDate" as={DateField} className="form-control" />
              {touched.selectedDate && errors.selectedDate && (
                <Form.Control.Feedback type="invalid">
                  {errors.selectedDate}
                </Form.Control.Feedback>
              )}
            </Form.Group>

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

Answer 1

您遇到的错误“Field”未定义表示 Formik 库中的 Field 导入不正确。您可以像这样导入和使用 Field：

import { useField, useFormikContext, Field } from 'formik'; // Import Field directly from Formik.

和:

<Field name="selectedDate" as={DateField} className="form-control" />