Как установить несколько FormItems под Form.List в antd V4

Question

Одиночная демонстрация FormItem в формате antd: https://ant.design/components/form/#components -form-demo-dynamici c -form-item . Там только один FormItem генерируется динамически каждый раз.

И вот Чего я хочу достичь.

Но у меня всегда были некоторые ошибки, такие как неправильное взаимодействие, неправильная проверка или неправильная значение формы.

Мой код:

<Form.List name="passenger">
    {(fields, { add, remove }) => {
      return (
        <div>
          {fields.map((field, index) => (
            <Form.Item
              {...(index === 0 ? formItemLayout : formItemLayoutWithOutLabel)}
              label={index === 0 ? 'Passengers' : ''}
              required={false}
              key={field.key}
            >
              <Form.Item
                {...field}
                validateTrigger={['onChange', 'onBlur']}
                rules={[
                  {
                    required: true,
                    whitespace: true,
                    message: "Please input passenger's name or delete this field.",
                  },
                ]}
                noStyle
              >
                <Input placeholder="passenger name" style={{ width: '40%' }} />
              </Form.Item>

              <Form.Item
                name={['age', index]}
                validateTrigger={['onChange', 'onBlur']}
                rules={[
                  {
                    required: true,
                    whitespace: true,
                    message: "Please input passenger's age or delete this field.",
                  },
                ]}
                noStyle
              >
                <Input placeholder="passenger age" style={{ width: '40%', marginRight: 8 }} />
              </Form.Item>

              {fields.length > 1 ? (
                <MinusCircleOutlined
                  className="dynamic-delete-button"
                  onClick={() => {
                    remove(field.name);
                  }}
                />
              ) : null}
            </Form.Item>
          ))}
          <Form.Item>
            <Button
              type="dashed"
              onClick={() => {
                add();
              }}
              style={{ width: '60%' }}
            >
              <PlusOutlined /> Add field
            </Button>
          </Form.Item>
        </div>
      );
    }}
  </Form.List>

Answer 1

Из примера, предоставленного командой antd @Sushilzzz:

Хитрость заключается в использовании field.name в name опорах Form.Item. Вам не нужно вкладывать вложенные элементы в другой элемент.

<Form.List name="users">
        {(fields, { add, remove }) => (
            <div>
              {fields.map((field) => (
                    <Form.Item name={[field.name, "name"]}>
                      <Input placeholder="Name" />
                    </Form.Item>
...