时间戳

首页 > 解决方案 > 动态 Formik 表单数据填充抛出受控输入错误

javascript - 动态 Formik 表单数据填充抛出受控输入错误

问题描述

我在 Formik 中创建了两个动态表单 A 和 B，每个表单都具有来自 JSON 的 Atype Btype 键的预填充数据，并且可以使用顶部的单选按钮进行查看。第一个表单的验证和初始化适用于页面的初始加载。但是，当我将视图切换到第二种形式时，它会使用第一种形式的数据进行初始化，并且验证也会失败。附加沙箱 url 以进行正确的取消操作。请帮助。附加沙盒网址https://codesandbox.io/s/frosty-voice-9i93v?file=/index.js

标签： javascriptreactjsformsformikdynamic-forms

解决方案

您需要enableReinitialize在 formik 字段中传递。否则当 formik 组件运行时 initialValue 仅在第一次渲染。这就是它没有更新您的价值的原因：

<Formik
        onSubmit={async (values) => {
          console.log(JSON.stringify(values, null, 2));
        }}
        initialValues={
          Atype ? getInitialValues(data, "A") : getInitialValues(data, "B")
        }
        enableReinitialize
        ...rest all things here

这是演示：https ://codesandbox.io/s/patient-dust-3k9xp?file=/index.js

推荐阅读