React Hook Form useFieldArray仅删除最后一个元素问题求助

问题根源是列表渲染时未设置唯一key属性，导致React无法正确追踪数组元素的变化，删除操作触发后UI更新异常，表现为总是移除最后一个元素。

修复步骤： #

1. 为数组项添加唯一标识：调用append方法时，给每个新增对象添加唯一id（比如用时间戳生成）：

<button type="button" onClick={() => append({ id: Date.now(), name: "" })}>
  Add
</button>

2. 渲染列表时设置key：遍历fields时，将每个项的id作为key传递给容器元素：

{fields.map((item, index) => (
  <div key={item.id}>
    <input {...register(`test.${index}.name`)} />
    <button type="button" onClick={() => remove(index)}>Delete</button>
  </div>
))}

补充说明： #

• React依赖key识别列表元素的唯一性，缺失或使用不稳定的key（比如循环的index）会导致组件复用逻辑出错，出现UI与数据不匹配的问题。
• 移除defaultValue，register会自动从fields中获取对应值进行绑定，手动设置defaultValue可能引发不必要的冲突。

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