React Hook Form动态表单异常：首次输入/删除字符需重复操作

你遇到的输入卡顿（首字符需重复输入、末字符需两次退格），核心是React Hook Form（RHF）的状态管理和你手动维护的受控组件逻辑冲突：

• 你同时使用了RHF的register方法（接管表单状态）和自定义的onChange+value绑定（手动维护inputList状态），两种状态管理方式形成竞争。
• 触发验证后，RHF内部会更新表单状态，此时手动维护的inputList与RHF内部状态不一致，输入时会出现状态覆盖，导致输入的字符被重置，表现为需要重复输入/删除。

移除手动状态维护逻辑，改用RHF专门为动态表单设计的useFieldArrayAPI，它能自动管理数组类型的表单字段，彻底避免状态同步问题。

1. 替换原有状态与事件处理，使用useFieldArray：

import { useForm, useFieldArray } from "react-hook-form";

// 组件内初始化
const { register, handleSubmit, formState: { errors }, control } = useForm({
  defaultValues: {
    employees: [{ firstName: "" }] // 设置动态字段初始值
  }
});

// 用useFieldArray管理动态字段的增删
const { fields, append, remove } = useFieldArray({
  control,
  name: "employees" // 与表单字段名对应
});

2. 简化输入框代码，移除手动onChange和value绑定：

{fields.map((item, index) => (
  <div key={item.id}>
    <input
      type="text"
      placeholder="Display Name"
      name={`employees[${index}].firstName`}
      className={errors.employees?.[index]?.firstName ? 'form-control error_input' : 'form-control'}
      {...register(`employees[${index}].firstName`, {
        required: 'First Name is required'
      })}
    />
    <button type="button" onClick={() => remove(index)}>删除</button>
  </div>
))}

<button type="button" onClick={() => append({ firstName: "" })}>添加</button>

3. 提交函数直接通过handleSubmit获取数据：

const onSubmit = (data) => {
  console.log(data.employees); // 直接获取所有动态字段数据
};

修改后表单状态完全由RHF管理，不会再出现状态冲突导致的输入异常，同时动态字段的增删逻辑更简洁。

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