Ошибка: объекты недействительны как дочерние объекты React при использовании Formik и передаче значений - PullRequest
Новая
       36

Ошибка: объекты недействительны как дочерние объекты React при использовании Formik и передаче значений

1 голос
/ 17 июня 2020

Я создаю форму с помощью 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 объектом, поэтому он недоволен, поскольку ожидает элемента Children, но что мне тогда передавать? Я пробовал (...props), но это также выдает ошибку.

Я чувствую, что делаю ладью ie ошибка при обращении со своим реквизитом, но я не могу ее точно определить: /

Есть мысли?

Мой компонент 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

Ответы [ 2 ]

0 голосов
/ 17 июня 2020

Я переключился на использование компонента FieldArray, и это помогает

0 голосов
/ 17 июня 2020

Мне кажется, что вы делаете: 

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

вместо: 

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