getFieldDecrator register strangely

Version

3.1.6

Environment

macOS 10.11.6, Chrome 63.0.3239.132

Reproduction link

https://codesandbox.io/s/o7l8nxyyxy

Steps to reproduce

click add button more than one time

What is expected?

the data get by getFieldsValue is always an array.

What is actually happening?

the data got is a object after the second click

---

There is a workaroud can avoid the problem, but it seems inelegant: getFieldsDecorator a new key such as tempConditions with a copy data. Is it a bug of antd or is it a usage error ?

[nodkrot]

Dynamic Form Item example from https://ant.design/components/form/

    ...
    getFieldDecorator('keys', { initialValue: [] });
    const keys = getFieldValue('keys');
    const formItems = keys.map((k, index) => (
      <Form.Item
        {...(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 }} />
        )}
        ...
      </Form.Item>
...

What doesn’t make sense to me is, why do we need two different fields getFieldDecorator('keys', { initialValue: [] }); => keys and getFieldDecorator('names[${k}]', { => names? When submitting the form the data is duplicated:

{
    ...
    keys: [{},{}],
    names: [{},{}],
    ...
}

Instinct tells me I should be able to do getFieldDecorator('names', { initialValue: [] }); and getFieldValue('names') but then I get this error:

One field name cannot be part of another, e.g. a and a.b.

What am I missing here?

[bishnu476]

This works perfectly for me though if the comparator is used the same warning pop up only at the start if the comparator is not used (which is used only to make id value to list size at initially ) no warning will be displayed. [Solution here

](https://codesandbox.io/s/duplicate-form-j7qso?file=/index.js:1585-3123) //Initial value of the keys in the list getFieldDecorator(“keys”, { initialValue: [0, 1, 2] });

//Initial values of the list const initialNames = [“A”, “B”, “C”];

// const keys = getFieldValue(“keys”);

// Array Comporator const arrayEquals = (a, b) => { return ( Array.isArray(a) && Array.isArray(b) && a.length === b.length && a.every((val, index) => val === b[index]) ); };

// Comporator that will only true initially and set id value to arrays.length-1 if (getFieldValue(“keys”).length === initialNames.length) { if (!arrayEquals(getFieldValue(“names”), initialNames)) { id = getFieldValue(“keys”).length - 1; console.log(“id”, id); } }

const formItems = keys.map((k, index) => (
  <Form.Item
    {...(index === 0 ? formItemLayout : formItemLayoutWithOutLabel)}
    label={index === 0 ? "Passengers" : ""}
    required={false}
    key={k}
  >
    {getFieldDecorator(`names[${k}]`, {
      initialValue: k + 1 <= initialKey.length ? `${initialNames[k]}` : " ",  //values initialized here from initialNames
      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"
        onClick={() => this.remove(k)}
      />
    ) : null}
  </Form.Item>
));