前两天我用antd design做项目的时候也是碰到这个问题,删的数据是对的,但是内容还在,form表单数据展示不对。先说造成的原因,再来说说解决的方法。
两个原因:
- map循环数组的key值的问题,循环用数组索引值来标记,删除数据数据顺移,key值所对应的模块依然还在,form表单模块没有变化。
- 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}]"变量"
,这样就可以了.