动态Formik表单数据填充引发受控输入错误

问题描述

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

解决方法

您需要在formik字段内传递enableReinitialize。否则，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