antd里有如下的逻辑没看看懂，麻烦帮忙解释一下？

Question

1.我最想知道下面这些代码具体啥意思没看懂，
2.我需要通过antd里的例子给他做扩展，需要点击添加按钮，加上俩个输入框，antd里面只加了一个

import { Form, Input, Icon, Button } from 'antd';
const FormItem = Form.Item;

let uuid = 0;
class DynamicFieldSet extends React.Component {
remove = (k) => {

const { form } = this.props;
// can use data-binding to get
const keys = form.getFieldValue('keys');
// We need at least one passenger
if (keys.length === 1) {
  return;
}

// can use data-binding to set
form.setFieldsValue({
  keys: keys.filter(key => key !== k),
});

}

add = () => {

uuid++;
const { form } = this.props;
// can use data-binding to get
const keys = form.getFieldValue('keys');
const nextKeys = keys.concat(uuid);
// can use data-binding to set
// important! notify form to detect changes
form.setFieldsValue({
  keys: nextKeys,
});

}

handleSubmit = (e) => {

e.preventDefault();
this.props.form.validateFields((err, values) => {
  if (!err) {
    console.log('Received values of form: ', values);
  }
});

}

render() {

const { getFieldDecorator, getFieldValue } = this.props.form;
const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 4 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 20 },
  },
};
const formItemLayoutWithOutLabel = {
  wrapperCol: {
    xs: { span: 24, offset: 0 },
    sm: { span: 20, offset: 4 },
  },
};
getFieldDecorator('keys', { initialValue: [] });
const keys = getFieldValue('keys');
const formItems = keys.map((k, index) => {
  return (
    <FormItem
      {...(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.",
        }],
      })(
        <Input placeholder="passenger name" style={{ width: '60%', marginRight: 8 }} />
      )}
      {keys.length > 1 ? (
        <Icon
          className="dynamic-delete-button"
          type="minus-circle-o"
          disabled={keys.length === 1}
          onClick={() => this.remove(k)}
        />
      ) : null}
    </FormItem>
  );
});
return (
  <Form onSubmit={this.handleSubmit}>
    {formItems}
    <FormItem {...formItemLayoutWithOutLabel}>
      <Button type="dashed" onClick={this.add} style={{ width: '60%' }}>
        <Icon type="plus" /> Add field
      </Button>
    </FormItem>
    <FormItem {...formItemLayoutWithOutLabel}>
      <Button type="primary" htmlType="submit">Submit</Button>
    </FormItem>
  </Form>
);

}
}

const WrappedDynamicFieldSet = Form.create()(DynamicFieldSet);
ReactDOM.render(<WrappedDynamicFieldSet />, mountNode);

Answer 1

哪里没看懂呢？
页面上表单的个数，取决于一个名称为keys的field.这个属性的值为几，页面就渲然几个FormItem，代码中是用keys.map来实现的。
提醒一点呢，这种动态加载FormItem的，一定要固定FormItem的key。

Answer 2

keys是你map的数据， key={index}，我觉得应该是这里的问题吧

Answer 3

formItems是啥