React Formik报错：Cannot set property 'props' of undefined 问题求助

Hey there, let's work through this Formik error you're hitting—this is a super common gotcha when getting started with the library, especially following older courses. Here are the most likely fixes to try, starting with the simplest:

1. Fix the Field's type Attribute #

First off, HTML input elements don't support a string type—this is almost certainly the root cause of your error. Formik's Field component maps to native inputs under the hood, so you need to use valid input types like text instead:

const Household = ({ values, errors, touched }) => (
  <Form>
    <div>
      {/* Swap type="string" for type="text" */}
      <Field type="text" name="household_name" placeholder="Household Name" />
    </div>
    <div>
      <Field type="text" name="name" placeholder="Family Name" />
    </div>
  </Form>
)

2. Ensure Your Component is Properly Wrapped in Formik #

If the type fix doesn't resolve the error, double-check that your Household component is being rendered inside a Formik context provider (either via the Formik component or the withFormik HOC).

Using the Formik Component Pattern (v2+ Recommended) #

Make sure you're passing Formik's context correctly by rendering Household inside the Formik component's child function:

import { Formik, Form, Field } from 'formik';

const Household = () => (
  <Form>
    <div>
      <Field type="text" name="household_name" placeholder="Household Name" />
    </div>
    <div>
      <Field type="text" name="name" placeholder="Family Name" />
    </div>
  </Form>
);

// Render this in your app
<Formik
  initialValues={{ household_name: '', name: '' }}
  onSubmit={(values) => {
    console.log('Submitted:', values);
  }}
>
  {/* Formik passes context through this function */}
  {() => <Household />}
</Formik>

Using the withFormik HOC (Older Formik Versions) #

If you're using the higher-order component approach (common in v1.x courses), ensure you're wrapping Household correctly and passing the necessary props:

import { withFormik, Form, Field } from 'formik';

const Household = ({ values, errors, touched }) => (
  <Form>
    <div>
      <Field type="text" name="household_name" placeholder="Household Name" />
      {/* Optional: Add error messaging if needed */}
      {touched.household_name && errors.household_name && (
        <span className="error-text">{errors.household_name}</span>
      )}
    </div>
    <div>
      <Field type="text" name="name" placeholder="Family Name" />
    </div>
  </Form>
);

const WrappedHousehold = withFormik({
  mapPropsToValues: () => ({ household_name: '', name: '' }),
  handleSubmit: (values, { setSubmitting }) => {
    console.log(values);
    setSubmitting(false);
  },
})(Household);

// Render WrappedHousehold instead of the raw Household component

3. Check Formik Version Compatibility #

If Andrew Mead's course uses an older Formik version (v1.x) and you installed v2.x+, API changes could be causing conflicts. For example, v2 requires the Formik component's children to be a function (as shown above), whereas v1 allowed direct component rendering.

You can either:

• Install the exact version used in the course (check the course notes for the version number)
• Adjust your code to match v2's syntax (the examples above use v2 standards)

4. Verify Correct Imports #

Double-check that you're importing Form, Field, and Formik directly from the formik package, not a third-party library or misnamed file:

import { Formik, Form, Field } from 'formik';

Start with fixing the type attribute first—that's the quickest fix for this specific error. If that doesn't work, move on to verifying your Formik wrapping setup.

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