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

Question

我正在使用Formik构建一个表单。在警告说渲染道具很快就会折旧之后，我试图摆脱它，并将它移到了 render={({values}) => {.....}} 到 {({values}) => {.....}} 后者被放置为一个子节点而不是一个道具，但我得到了以下错误。

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.

我的理解是，我是在破坏 props 途经 ({ values }) 所以我以为值将是我的 initialValues 对象，然后我就可以直接映射我的 patients 数组来创建所需的组件。

我想，React认为 values 是一个对象，所以他不高兴，因为他希望有一个儿童元素，但我应该通过什么呢？我试过 (...props) 但它也给我一个错误。

我感觉我在处理我的道具时犯了一个新手的错误，但我不能确定它。

任何想法？

我的Formik组件如下。

<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

对我来说，你看起来像是在做:

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

而不是doing。

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

Answer 2

我改用了FieldArray组件，这样就可以了。