关于使用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>
    );
  });