Ant Design Form.List默认输入框切换后重复按钮问题排查与解决

你遇到的额外按钮问题，核心原因是手动拼接firstRowOpen到Form.List的fields数组上，破坏了Form.List内部的字段管理逻辑：

1. Form.List的fields是组件内部维护的、已经注册到表单系统的字段集合，而firstRowOpen是你手动定义的一个“假”字段，并没有通过Form.List的add()方法注册进去。
2. 当你点击“Add field to inner”按钮调用add()后，Form.List的fields数组会新增一个真实注册的字段，此时fields.concat(firstRowOpen)会变成[真实字段1, 真实字段2, 假字段]。
3. 你的fieldsOnEdit数组是基于这个拼接后的数组索引来管理编辑状态的，当触发toggleSmall(index)切换编辑时，这个索引对应的可能是未被Form.List正确管理的假字段，导致渲染逻辑混乱，出现额外的按钮元素。

正确的做法是利用Form.List的初始值配置来实现默认展开一个输入框，而不是手动拼接假字段。具体步骤如下：

1. 移除手动拼接的逻辑 #

删掉fields.concat(firstRowOpen)的写法，直接使用Form.List提供的fields数组进行渲染：

{fields.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} />
))}

2. 配置Form.List的初始值 #

在Form.List所在的父表单字段上设置initialValue，让Form.List默认生成一个初始行。假设你的Form.List的name是[fieldKey, "inner"]，那么在对应的父Form.Item或者Form组件中，给这个路径设置初始值：

比如在父级表单的initialValues中添加：

<Form
  initialValues={{
    // 其他字段...
    [fieldKey]: {
      inner: [{}] // 这里设置一个空对象，让Form.List默认渲染一行
    }
  }}
>
  {/* 你的Form.List代码 */}
</Form>

或者，如果你是在SubForm中使用，可以直接给Form.List的父字段设置初始值：

<Form.Item name={[fieldKey, "inner"]}>
  <Form.List name={[fieldKey, "inner"]}>
    {/* ... */}
  </Form.List>
</Form.Item>

并在父表单的initialValues中指定该路径的初始值为[{}]。

3. 验证逻辑正确性 #

这样修改后，Form.List内部会正确管理所有字段（包括默认的初始行），fields数组中的每一项都是经过注册的真实字段，index和field.key也会和表单状态一一对应，触发toggleSmall时就不会出现索引混乱导致的额外按钮问题了。

Form.List的设计初衷是让开发者通过它提供的add/remove方法来管理字段，手动拼接外部字段会打破它的内部状态管理，容易引发各种渲染和状态同步问题。始终优先使用Form.List的内置API（比如initialValue、add、remove）来操作字段，能避免这类兼容性问题。

内容的提问来源于stack exchange，提问作者Asking