react 项目antd 表单组件内容更新小坑记录

前两天我用antd design做项目的时候也是碰到这个问题，删的数据是对的，但是内容还在，form表单数据展示不对。先说造成的原因，再来说说解决的方法。

两个原因：

1. map循环数组的key值的问题，循环用数组索引值来标记，删除数据数据顺移，key值所对应的模块依然还在，form表单模块没有变化。
2. getFieldDecorator的id问题，即使删除0索引数据，arr[0].name这个id还是在的，所以form所监听的对应值就会还在。

const formItems = datas.map((k, index) => (
      <Form.Item
        label={'Passengers'}
        key={index} //必须唯一且稳定的值，建议是id
      >
    //arr[${index}]name如果是单纯渲染用index索引的值是没有问题的
    //但是有增删操作的时候需要换种写法，用id值或者其他唯一值替代index，在提交的时候处理下数据即可
       {getFieldDecorator(`member[${index}].name`, {
          validateTrigger: ['onChange', 'onBlur'],
          rules: [
            {
              required: true,
              whitespace: true,
              message: "Please input passenger's name or delete this field.",
            },
          ],
        })(<Input placeholder="passenger name" />)}
      </Form.Item>
    ));

嵌套式的写法注意要点:id必须唯一

ps: id的值有变量的时候就是数组形式,要是作为键值key,那就写成: member[${index}]"变量",这样就可以了.