使用react-hook-form双useFieldArray时字符串被拆分为字符对象数组问题求助

问题根源 #

useFieldArray 是 React Hook Form 专门用来处理数组类型表单字段的 API，它要求绑定的字段值必须是数组格式。你的 photo 字段是单个字符串，而字符串在 JS 中属于类数组对象（具备索引和 length 属性），所以 useFieldArray 会错误地把它当成数组解析，将每个字符拆分为单独的对象项。

解决方案 #

根据业务需求分两种处理方式：

1. 如果 photo 是单个图片 URL（非数组）

直接放弃使用 useFieldArray，用 React Hook Form 基础 API 处理即可：

const { register, watch } = useForm({
  mode: "all",
  defaultValues: activeObject,
});

// 注册单个photo字段
const photoInputProps = register("photo");

// 或者监听photo字段值
const currentPhoto = watch("photo");

2. 如果 photo 应该是图片 URL 数组

先修正默认值格式，把单个字符串包装成数组：

// 修正默认值，确保photo是数组格式
const correctedDefaultValues = {
  ...activeObject,
  photo: Array.isArray(activeObject.photo) ? activeObject.photo : [activeObject.photo]
};

const { register, control } = useForm({
  mode: "all",
  defaultValues: correctedDefaultValues,
});

// 此时useFieldArray可正常解析
const { fields: photoFields, append: photoAppend, remove: photoRemove } = useFieldArray({ 
  control, 
  name: "photo" 
});

调整后 photoFields 会正确显示为包含单个字符串项的数组，而非拆分后的字符对象。

内容的提问来源于stack exchange，提问作者george CHAN