html 表单二维数组,ant design 动态增减表单项，将数据存在一个二维数组内，获取的表单数据很怪异...

官方文档中的例子，动态增减表单项

动态增加、减少表单项。

如图，根据官方文档提供的一个栗子，不过它是将数据存在一个一维数组里的

getFieldDecorator('keys', { initialValue: [] });

const keys = getFieldValue('keys');

const formItems = keys.map((k, index) => {

return (

{...(index === 0 ? formItemLayout : formItemLayoutWithOutLabel)}

label={index === 0 ? 'Passengers' : ''}

required={false}

key={k}

>

{getFieldDecorator(`names[${k}]`, {

validateTrigger: ['onChange', 'onBlur'],

rules: [{

required: true,

whitespace: true,

message: "Please input passenger's name or delete this field.",

}],

})(

)}

{keys.length > 1 ? (

className="dynamic-delete-button"

type="minus-circle-o"

disabled={keys.length === 1}

onClick={() => this.remove(k)}

/>

) : null}

);

});

我写的一个有切换的表单项，表单数据存在一个二维数组内

let keys= getFieldValue('keys');

let types= getFieldValue('types');

let cmts= getFieldValue('cmts');

console.log(keys);

console.log(types);

console.log(cmts);

while (n<3){

formItems[n]= hbp[n].map((k, i) => {

return (

{getFieldDecorator(`keys[${n}][${k}]`, {

initialValue: keys[n]?keys[n][k]:'',

rules: [{ required: true, message: '请输入数据或者删除空白行!', whitespace: true }],

})(

)}

{getFieldDecorator(`types[${n}][${k}]`,{

initialValue: types[n]?types[n][k]:'',

})(

String

Integer

)}

{getFieldDecorator(`cmts[${n}][${k}]`,{

initialValue: cmts[n]?cmts[n][k]:'',

})(

)}

this.removeRequest(k)}>删除

);

})

n++;

}

输出来的二维数组的情况是这样的

这是什么原因呢