react-hook-form useFieldArray append空值无法新增输入框问题

需求说明 #

需要实现的表单规则如下：

• 构建输入框数组，默认渲染至少1个输入项
• 表单提交时所有输入项不允许为空
• 提交后返回包含所有输入框取值的数组

问题表现 #

现有代码基础功能可用，但存在交互异常：当上一个输入框为空时，调用append方法无法追加新的输入项，仅在前序输入框填入有效值后才能成功新增，不符合「可任意新增多个输入项」的预期。

问题根因 #

实现整体思路正确，使用react-hook-form的useFieldArray实现动态字段数组是官方推荐方案，异常由两个配置缺失导致：

1. 未给表单设置初始默认值，既不符合「默认渲染1个输入项」的需求，也会导致字段数组初始状态不稳定
2. append方法默认会在执行时触发已存在字段的校验，当已有空输入项触发必填校验错误时，会中断字段数组的更新流程，导致新增失败

修复方案 #

步骤1：补充表单默认值 #

初始化useForm时传入defaultValues配置，设置values数组初始包含1个空字符串，保证首次加载就渲染1个输入项。

步骤2：修改append方法配置 #

调用append时传入第二个配置参数，关闭新增操作时的自动校验，避免已有空字段的校验错误拦截新增动作。

步骤3（可选）：优化错误渲染逻辑 #

原错误判断逻辑存在冗余判断，可调整为仅当前索引下存在错误时才渲染错误提示，同时给表单内按钮显式声明type属性，避免意外触发提交动作。

修复后完整代码 #

import "./styles.css";
import { useFieldArray, useForm } from "react-hook-form";

export default function App() {
  const {
    register,
    handleSubmit,
    formState: { errors },
    control
  } = useForm({
    // 新增默认值配置，初始渲染1个输入项
    defaultValues: {
      values: [""]
    }
  });

  const { fields, append, remove } = useFieldArray({
    control,
    name: "values"
  });

  const answerQuestion = (formData) => {
    console.log(formData);
    return;
  };

  return (
    <div className="App">
      <h1>array of inputs</h1>
      <form className="form" onSubmit={handleSubmit(answerQuestion)} noValidate>
        <div className="form-body">
          {fields.map((item, index) => {
            return (
              <div key={item.id}>
                <input
                  {...register(`values.${index}`, {
                    required: "This field is required"
                  })}
                  type="text"
                />
                {index !== 0 && (
                  <button type="button" onClick={() => remove(index)}>
                    delete
                  </button>
                )}
                {/* 优化错误提示渲染逻辑 */}
                {errors.values?.[index] && (
                  <span className="error">{errors.values[index].message}</span>
                )}
              </div>
            );
          })}
        </div>

        <button
          type="button"
          onClick={(e) => {
            e.preventDefault();
            // 关闭新增时的自动校验，避免拦截新增操作
            append("", { shouldValidate: false });
          }}
        >
          add field
        </button>
        <button type="submit" className="edit">send data</button>
      </form>
    </div>
  );
}

修复后所有需求均可满足：页面初始默认渲染1个输入项、可随时点击新增按钮追加输入框不受已填内容限制、点击提交时会统一校验所有输入项非空、校验通过后可拿到完整的输入值数组。

内容的提问来源于stack exchange，提问作者Fotis Stavrakis