antd V4中如何设置Form.List下的多个FormItem

Question

antd 中的单个 FormItem 演示：https ://ant.design/components/form/#components-form-demo-dynamic-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

从 @Sushilzzz 给出的 antd 团队提供的示例来看：

诀窍就是用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>
...