如何解决动态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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。