如何使用 Formik 发送具有多个子表单的数据

Question

我正在使用 DRF 构建一个反应应用程序，并且我正在尝试构建一些抽认卡，灵感来自应用程序 Quizlet。 每当你在 Quizlet 中创建卡片组时，你都会得到一个表单：在这个表单中，你需要创建一个卡片组实例和多个卡片实例，这意味着你需要将发布请求发送到 2 个不同的端点（我使用的是 postgres：有两个表

Deck: title, description, directory_id, ...
Card: side1, side2, deck_id, ...

)

我的问题是，我 go 如何在反应中使用 formik？ 我是否像这样使用多个 Formik 组件

import { Formik, Form } from "formik"
cardForms = () => {
  for (i to n)
     <Formik ...>
}
...
return (
  { */ formik component for deck title and description */ }
  <Formik ... />
  
  {*/ formik component for each card form */}
  {cardForms}
)

看起来它可以工作，但是我的解决方案存在多个问题。 每个 formik 组件都有一个 onSubmit 道具。 这意味着我将访问数据库 n 次（每张卡一次，加上创建实际牌组的访问）。 这是非常低效的。 我只想要两个Formik组件：一个用于套牌，一个用于所有卡片。 但是我怎么会go一下呢？ 感谢您的时间和考虑。

Answer 1

为此，您可以只使用 1 个 Formik 上下文。 只需使用 formik 的FieldArray组件即可访问各个卡片。 例如假设您的初始数据是这样的：

{
  title: "deck title",
  description: "deck description",
  cards: [{
     side1: "side 1",
     side2: "side 2"
  }]
}

<Formik>
  {({ values }) => (
  <Form>
   <Field name="title"/>
   <Field name="description"/>
   <FieldArray name="cards">
     {({ insert, remove, push }) => (
        <div>
        {
           values.cards.map((card,index) => {
               return <Field name={`cards.${index}.sid1`}></Field>
           })
        }
        </div>
     )})
     
   </FieldArray>
  </Form>
 )}
<Formik>

更多信息在这里： https://formik.org/docs/examples/field-arrays