0Pricing
React Academy · 课时

使用 useFieldArray 创建动态字段

使用 useFieldArray 钩子添加、删除和重新排列动态表单字段。

使用 useFieldArray 创建动态字段 是 CoddyKit 上的免费 React Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 React Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。

欢迎

在本课中，您将使用 React Hook Form 的 useFieldArray 钩子构建包含动态字段列表的表单，例如添加、删除和重新排序项目。

什么是 useFieldArray？

useFieldArray 用于管理 React Hook Form 中的字段数组。它提供 append、prepend、remove、swap、move 和 insert 方法，用于操作字段列表。
import { useFieldArray } from 'react-hook-form';

const { fields, append, remove } = useFieldArray({
  control,
  name: 'phoneNumbers',
});

设置：来自 useForm 的 control

useFieldArray 需要使用 useForm 提供的 `control` 对象。请将它与 register 和 handleSubmit 一起解构出来。
const { register, control, handleSubmit } = useForm({
  defaultValues: { phoneNumbers: [{ value: '' }] },
});

渲染字段

遍历 `fields` 以渲染每个项目。使用字段的 `id` 作为 React 键（不要使用索引）。请使用数组路径语法注册每个字段。
return fields.map((field, index) => (
  <div key={field.id}>
    <input
      {...register(`phoneNumbers.${index}.value`)}
    />
    <button onClick={() => remove(index)}>Remove</button>
  </div>
));

追加新字段

使用默认值对象调用 append()，即可在列表末尾添加新字段。表单会自动注册该字段。
<button onClick={() => append({ value: '' })}>
  Add Phone Number
</button>

删除字段

调用 remove(index) 可删除指定位置的字段。后续所有字段会向前移动，其注册信息也会自动更新。
<button onClick={() => remove(index)}>Delete</button>

最少字段数校验

您可以在 Zod schema 中使用 .min() 校验数组长度，以确保至少存在一个字段。
const schema = z.object({
  emails: z.array(z.object({ value: z.string().email() }))
           .min(1, 'At least one email required'),
});

交换和移动字段

使用 `swap(indexA, indexB)` 交换两个字段，或使用 `move(from, to)` 重新定位字段。这些方法常用于构建支持拖放排序的字段列表。
swap(0, 2); // swap first and third items
move(3, 0); // move item at index 3 to the top

嵌套 useFieldArray

您可以在一个 useFieldArray 中嵌套另一个 useFieldArray，以构建多层级动态表单（例如包含明细项目的发票，而每个明细项目还包含子项目）。

提交数组数据

提交时，handleSubmit 会将完整数组作为 data 对象的一部分传递。您可以在 data.phoneNumbers 中访问它；该数组由符合字段结构的对象组成。
const onSubmit = (data) => {
  console.log(data.phoneNumbers);
  // [{ value: '555-1234' }, { value: '555-5678' }]
};

快速检查

渲染 useFieldArray 字段时，为什么应该使用 field.id（而不是数组索引）作为 React 键？

回顾

useFieldArray 会提供 fields 数组以及 append、remove、swap、move 方法。使用 field.id 作为 React 键，使用“fieldName.index.subfield”语法进行注册，并使用 Zod 的 min/max 校验数组。

课程完成

恭喜您！您已完成 **使用 React Hook Form 管理表单**。现在您可以使用 RHF 构建高性能表单、应用 Zod schema 校验，并创建动态字段数组。

常见问题解答

「使用 useFieldArray 创建动态字段」课时是免费的吗？

是的 — 「使用 useFieldArray 创建动态字段」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。

「使用 useFieldArray 创建动态字段」这节课中我会学到什么？

使用 useFieldArray 钩子添加、删除和重新排列动态表单字段。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。

「使用 useFieldArray 创建动态字段」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 React Academy 课中编写并运行代码吗？

能。每节 React Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. React Hook Form 入门
  2. 验证规则与错误消息
  3. 使用 Zod 进行架构验证
  4. 使用 useFieldArray 创建动态字段
← 返回 React Academy