使用Formik的FieldArray时出现getFieldProps未定义报错如何解决?
问题原因及解决方案
这个报错本质是Field/FieldArray组件无法读取到Formik的上下文实例,常见触发原因和对应解决方法如下:
- 版本不兼容:这是拷贝官方示例仍报错的最常见原因
目前Formik官方文档的示例适配的是v2.2.x稳定版本,如果你安装的是v3.x的alpha测试版,或是v2.0.x的老旧版本,都会出现API不匹配导致上下文注入失败的问题。
执行以下命令安装匹配的稳定版本即可解决:
如果确实需要使用v3测试版,需要参考对应版本的API变更说明调整FieldArray的调用方式,不可直接复用v2版本的示例代码。npm uninstall formik && npm install formik@2.2.9 # 用yarn的话执行: # yarn remove formik && yarn add formik@2.2.9 - 组件嵌套不符合要求
确认所有Field、FieldArray、Form组件都严格嵌套在Formik组件的子节点范围内,不要将这些组件放在Formik组件之外渲染,也不要通过React Portal之类的方式将表单组件挂载到Formik上下文所在DOM树之外的节点。 - 导入路径不统一
检查所有Formik相关组件的导入语句,确保都从formik包统一导入,不要部分从内部路径(如formik/dist/Field)或第三方封装包导入,避免多个Formik实例上下文不共享的问题。
内容的提问来源于stack exchange,提问作者Pavan Kumar
相关产品推荐
相关产品推荐

