### 如何在 Ant Design 的 `Form.List` 组件中添加唯一 key 为了确保列表项具有唯一的标识符，在渲染动态表单项时，给每一项分配一个唯一的键非常重要。通常情况下，当使用 `Form.List` 创建可变数量的子组件时，默认会遇到缺少唯一键的问题。 通过自定义逻辑来生成并传递这个键值可以解决此问题。下面是一个具体的实现方法： #### 实现方式 创建一个新的状态变量用于存储当前的最大索引，并将其作为新项目的初始key。每当向表单中添加一项时更新该最大索引值。对于已存在的项目，则直接利用其对应的索引来构建各自的key[^1]。 ```jsx import React, { useState } from 'react'; import { Form, Input, Button } from 'antd'; const DynamicFieldSet = () => { const [form] = Form.useForm(); const [maxIndex, setMaxIndex] = useState(0); return ( <Form form={form} name="dynamic_form_item"> <Form.List name="users"> {(fields, { add, remove }) => ( <> {fields.map(({ key, name, ...restField }, index) => ( // 使用index和maxIndex组合成uniqueKey <div key={`${name}-${index}`}> <Form.Item> <Input placeholder="Enter user's name" {...restField} /> </Form.Item> <Button type="link" onClick={() => remove(name)}> Delete </Button> </div> ))} <Button type="primary" onClick={() => { add(); setMaxIndex(prev => prev + 1); }}> Add field </Button> </> )} </Form.List> </Form> ); }; ``` 在这个例子中，每次调用 `add()` 方法都会增加 `maxIndex` 的数值，从而保证新增加的每一个字段都有独一无二的关键字。而对于已经存在于表单中的条目来说，它们各自拥有的名称加上顺序编号也构成了各不相同的标识码。 #### 注意事项 - 当移除某一条记录后，剩余记录所关联的key不会受到影响； - 添加新的记录时应确保为其指定全新的、未被使用的key； - 需要特别留意的是，如果页面刷新或重新加载，之前保存的状态将会丢失，因此建议配合持久化机制一起使用以保持数据的一致性和连续性；