### 如何使用 Ant Design 的 `Form.List` 实现表单项的初始化 在 Ant Design 中，`Form.List` 是一种动态管理表单字段列表的强大工具。为了实现初始状态下包含至少一个不可删除项的功能，可以通过设置 `initialValues` 和自定义逻辑来完成。 以下是具体实现方式： #### 初始状态配置 通过 `useForm` 钩子获取表单实例，并利用 `setFieldsValue` 方法将初始值传递给表单[^2]。对于 `Form.List` 而言，可以将其初始值设定为数组形式，其中每一项代表一个字段组。 ```javascript import React from 'react'; import { Form, Input, Button } from 'antd'; const MyForm = () => { const [form] = Form.useForm(); // 设置初始值 React.useEffect(() => { form.setFieldsValue({ users: [ { name: '', key: Date.now() }, // 至少保留一项 ], }); }, []); return ( <Form form={form} layout="vertical"> <Form.List name="users"> {(fields, { add, remove }) => ( <> {fields.map(({ key, name, fieldKey }, index) => ( <div key={key}> {/* 动态渲染输入框 */} <Form.Item {...(index === 0 && { rules: [{ required: true }] })} name={[name, 'name']} fieldKey={[fieldKey, 'name']} label={`User ${index + 1}`} > <Input placeholder="Enter user name" /> </Form.Item> {/* 控制第一个字段不被移除 */} {index > 0 && ( <Button type="link" onClick={() => remove(name)}> Remove </Button> )} </div> ))} {/* 添加新字段按钮 */} <Form.Item> <Button type="dashed" block onClick={() => add()}> Add User </Button> </Form.Item> </> )} </Form.List> <Form.Item> <Button type="primary" htmlType="submit"> Submit </Button> </Form.Item> </Form> ); }; export default MyForm; ``` #### 关键点解析 1. **初始值设置** 使用 `form.setFieldsValue` 将 `users` 字段初始化为包含至少一个对象的数组。这样可以在页面加载时自动显示一条记录[^2]。 2. **防止首个字段被删除** 在遍历 `Form.List` 渲染的内容中，判断当前索引是否大于零 (`index > 0`) 来决定是否展示「Remove」按钮。如果索引为零，则隐藏该按钮[^1]。 3. **必填校验规则** 对于首条记录，可通过条件语句为其添加 `rules` 属性，确保其不能为空。 4. **动态更新机制** 如果需要更复杂的场景（比如依赖某个字段的状态），可借助 `shouldUpdate` 属性进一步增强控制能力[^3]。 --- ### 示例效果说明 运行以上代码后，表单会预填充一条用户数据作为起点。点击「Add User」按钮能够新增更多用户字段；而第一条记录无法被移除，其余记录则支持自由增删操作。 ---