关于使用ant-design设计可动态添加FormItem的过程中遇到的问题记录。

应用场景：创建一个可动态增加和删除的FormItem组合组件，由一个下拉菜单和一个文本域组成。

问题现象：按照正常的操作流程，组件可以正常的添加和删除，下拉菜单也可以正常的选择。但是如果先添加，然后删除第一个源组件，则剩下的第二个组件在选择下拉菜单的过程中就会报错，提示:

Uncaught TypeError: Cannot read property 'filter' of undefined

问题分析：通过代码的断点检查发现是在执行删除后，重新渲染后 fieldMeta 里面的值变成了空的了，但是前面的操作都没有问题，整个流程检查之后也没有发现代码有什么逻辑问题。在经过不解之后，发现在对keys做遍历生成FormItem的过程中key值使用的是map的index值，然后将key值改成便利项item的key之后，再次执行程序，问题没有了。具体问题原因应该还是React对于遍历渲染的数据记录相关。

 let uuid = 0; ...... upgrade_rules.map(item =>{    if(!item.key){      item.key=++uuid;      item.deviceModels = deviceModels;    } });getFieldDecorator('keys', { initialValue: upgrade_rules });const keys = getFieldValue('keys');// 错误遍历代码const formItems = keys.map((k, index) => {    return (      <div key={index} className={styles.rulesSection}>        ......      </div>    );  });//正确遍历代码const formItems = keys.map((k, index) => {    return (      <div key={k.key} className={styles.rulesSection}>        ......      </div>    );  });