求助：Formik props中出现React.Children.only期望单个React元素子节点报错

Hey there! Even if you’ve been using Formik for ages, this error can sneak up on you—let’s figure out what’s going on and how to fix it quickly.

This error happens because Formik expects exactly one React element as its direct child—no extra text nodes, comments, or multiple un-wrapped components allowed. Here are the most common culprits and fixes:

1. You’re passing multiple direct children to Formik #

If you’ve got something like this, where Formik has more than one top-level child component/text:

<Formik initialValues={{ email: "" }} onSubmit={(vals) => console.log(vals)}>
  <Form>
    <input name="email" type="email" />
  </Form>
  <p>Enter your email to sign up</p> {/* This extra element breaks things */}
</Formik>

Fix: Wrap all children in a React Fragment (<>) or a container like <div>:

<Formik initialValues={{ email: "" }} onSubmit={(vals) => console.log(vals)}>
  <>
    <Form>
      <input name="email" type="email" />
    </Form>
    <p>Enter your email to sign up</p>
  </>
</Formik>

2. Your render prop returns multiple elements #

When using Formik’s render prop pattern, if you return more than one element without wrapping them, you’ll hit this error:

<Formik initialValues={{ email: "" }} onSubmit={(vals) => console.log(vals)}>
  {(formikProps) => (
    <Form>
      <input name="email" type="email" />
    </Form>
    <button type="submit" disabled={!formikProps.isValid}>Submit</button> {/* Un-wrapped second element */}
  )}
</Formik>

Fix: Wrap the returned elements in a Fragment or container:

<Formik initialValues={{ email: "" }} onSubmit={(vals) => console.log(vals)}>
  {(formikProps) => (
    <>
      <Form>
        <input name="email" type="email" />
      </Form>
      <button type="submit" disabled={!formikProps.isValid}>Submit</button>
    </>
  )}
</Formik>

3. Accidental text nodes or comments as direct children #

Sometimes invisible text nodes (like newlines or spaces) or top-level comments inside Formik’s tags can trigger this error:

<Formik initialValues={{ email: "" }} onSubmit={(vals) => console.log(vals)}>
  {/* This top-level comment counts as a child node */}
  <Form>
    <input name="email" type="email" />
  </Form>
</Formik>

Fix: Move comments inside your child component, or ensure there are no extra text nodes between Formik and its single child:

<Formik initialValues={{ email: "" }} onSubmit={(vals) => console.log(vals)}>
  <Form>
    {/* Comments inside the child are fine */}
    <input name="email" type="email" />
  </Form>
</Formik>

At the end of the day, Formik’s children prop is strictly designed to accept one React element. Wrap multiple items in a Fragment, and you’ll be back up and running in no time!

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