错误：使用 Formik 和传递值时，对象作为 React 子项无效

Question

I'm building a form using Formik. Following the warning saying that the render props would soon be depreciated, I tried to get rid of it and move render={({values}) => {.....}} to {({values}) => {.....}} (the latter being placed as a child rather than a prop but I get the following error:

Error: Objects are not valid as a React child (found: object with keys {firstName, lastName, items}). If you meant to render a collection of children, use an array instead.

My understanding is that I'm destructuring props when I'm passing ({ values }) so I assumed values was going to be my initialValues object and then I could just map my patients array to create as many components as needed.

I suppose React considers values to be an object so he's not happy as he expect a Children element but what should I be passing then? I tried (...props) but it's also giving me an error.

I sense I'm doing a rookie mistake handling my props but I can't pinpoint it:/

Any thoughts?

My Formik component is the following:

<Formik
  initialValues={{
    patients: [
      {
        id: "1",
        firstName: "",
        lastName: "",
        items: "",
      },
    ],
    phoneNumber: "",
    peopleOrdering: 1,
    monthOrder: "1",
    collectionOrDelivery: "",
    waitingOrLater: "",
    address: "",
    staffMember: "",
    claimReceipt: "",
    whereIsPrescription: "",
    keepSubscription: "",
    }}
    validationSchema={OrderSchema}
    onSubmit={() => {}}
>
  {({ values }) => (
    <Form>
      <FormItem name="patients">
        {values.patients.map((patient, i) => (
          <div key={patient}>
            <Input name={`patients[${i}].firstName`}></Input>
            <Input name={`patients[${i}].lastName`}></Input>
            <Input name={`patients[${i}].items`}></Input>
          </div>
        ))}
      </FormItem>
     // ... REST OF THE FORM
    </Form>
  )}
</Formik

Answer 1

For me it looks like you are doing:

<Formik {...props}>
  {fn}
</Formik>

instead of doing:

<Formik {...props}>
  {fn()}
</Formik>

Answer 2

I switched to using the FieldArray component and that does the trick