将字段动态添加到 Formik 表单答案

【问题标题】：Dynamically add fields to Formik form将字段动态添加到 Formik 表单
【发布时间】：2021-01-23 04:24:20
【问题描述】：

我需要一种在 for 循环中将字段添加到 Formik 表单的方法。我已经阅读了 FieldArray 组件的文档，但我并不真正了解如何使用它。这是我当前的代码：

function generate(values) {
        for (let i = 0; i < 10; i++) {
            values.test.push({
                hello: "world"
            })
        }
    }

    return (
        <div>
            <Formik initialValues={{test: []}}/>
            {(values)=>(
                <Form>
                    <FieldArray>
                        {()=>generate(values)}
                        <p>{JSON.stringify(values)}</p>
                    </FieldArray>
                </Form>
            )}
        </div>
    )

目前，它只显示一个空白页面。甚至没有错误消息。

【问题讨论】：

您好，当您说添加动态字段时，您能否提供更多关于您希望添加的字段类型的最新信息？输入文本+标签或复选框？很高兴知道真正的用例。

标签： javascript reactjs formik

【解决方案1】：

您上面的代码不起作用的原因是因为您在<Formik />之外调用字段数组和表单

应该是：

<Formik render={({ values }) => (
  <Form>
    <FieldArray />
  </Form>
)/>

而不是：

<Formik initialValues={{test: []}} />
<Form>
  <FieldArray />
</Form>

你可以在这里看到一个更清晰的例子：https://codesandbox.io/s/1o8n593z6q

【讨论】：