使用mobx-react-form做邮箱校验报The selected field is not defined (email)如何解决

报错原因 #

你实例化MobxReactForm时传入的第一个配置对象的键名不符合库的规范：
MobxReactForm构造函数要求第一个参数必须用fields作为键来传递表单字段的配置，你此处错误使用了变量名formFields作为键，导致库没有识别到你定义的email字段，调用this.form.$('email')获取字段实例时就会抛出「字段未定义」的错误。

解决方法 #

修改实例化MobxReactForm的代码，将第一个参数的键调整为fields即可：

// 原错误写法
// return new MobxReactForm({ formFields }, { plugins, hooks, formOptions });

// 修改后的正确写法
return new MobxReactForm({ fields: formFields }, { plugins, hooks, formOptions });

额外优化建议 #

• 你的类名使用了小写的form，建议改为首字母大写的Form，避免和原生HTML的form标签冲突，引发不必要的渲染问题
• 确认你已经正确安装并导入了mobx-react-form、validatorjs以及对应的dvr插件依赖，避免出现其他关联报错

内容的提问来源于stack exchange，提问作者Aezaz Ali