IT技术 - 在表单标签中打开一个默认输入 - 吾爱随笔录

我有下一个应用程序： https://codesandbox.io/s/uwmig?file=/index.js，
用户可以添加任意数量的字段，并为每个生成的输入添加图像，点击添加按钮。
我想要实现的是在我的应用程序中设置一个默认的打开输入并获得如下内容：

现在通过执行以下操作打开默认部分：

  const firstRowOpen = { name: 0, key: 0, isListField: true, fieldKey: 0 };

和：

{fields.concat(firstRowOpen).map((field, index)... //here i map already concatinated fields and this is why appears first default block

代码：

 <Form.List name={[fieldKey, "inner"]}>
      {(fields, { add, remove }) => {
        return (
          <div>
            {fields.concat(firstRowOpen).map((field, index) =>
              !fieldsOnEdit.includes(index) ? (
                <Space
                  key={field.key}
                  style={{ display: "flex", marginBottom: 8 }}
                  align="start"
                >
                  <Demo
                    idx={index}
                    upload={upload}
                    setUpload={setUpload}
                    field={field}
                  />

                  <Form.Item>
                    <Button
                      type="primary"
                      htmlType="submit"
                      key="submit"
                      onClick={() => toggleSmall(index)}
                    >
                      Toggle first row
                    </Button>
                  </Form.Item>
                </Space>
              ) : (
                <Edit value={values} mode={toggleSmall} keyForm={index} />
              )
            )}

            <Form.Item>
              <Button
                type="dashed"
                onClick={() => {
                  add();
                }}
                block
              >
                <PlusOutlined /> Add field to inner
              </Button>
            </Form.Item>
          </div>
        );
      }}
    </Form.List>

问题：当我点击add按钮添加图像，然后点击按钮后，toggle first row 下面会出现另一个按钮。
问：为什么会出现这个问题？以及如何解决这个问题？
演示：https : //codesandbox.io/s/wonderful-ives-o81ue?file=/ SubForm.js: 767-2195