错误：使用 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.

我的理解是，当我传递({ values })时我正在解构props ，所以我假设值将是我的initialValues object 然后我可以只 map 我的patients数组来创建所需的组件。

我想 React 认为values是 object 所以他不高兴，因为他期望一个 Children 元素，但我应该传递什么？ 我试过(...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>

而不是这样做：

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

Answer 2

我切换到使用 FieldArray 组件，这可以解决问题