React-hook-form useFieldArray 用于字符串数组而不是对象

我正在使用 useFieldArray 从我的后端 api 获取默认值。我的 categories 是一个字符串数组。但是,react-hook-form 仅支持对象数组。这是我的猫鼬的架构

 type BookDocument = Document & {
  title: string
  description: string
  categories: string[]
  language: string
  publicationYear: number
}

const bookSchema = new Schema(
  {
    title: { type: String, required: true },
    description: { type: String, required: true },
    categories: [{ type: String, requried: true }],
    language: { type: String, required: true },
    publicationYear: { type: Number, required: true },
  },
  { timestamps: true }
)

因此,我不得不从前端修改我的表单,如下所示:

type FormData = {
  title: string
  description: string
  categories: { category: string }[]
  language: string
  year: number
}

 const {
    handleSubmit,
    control,
    formState: { errors },
  } = useForm<FormData>({
    mode: 'onBlur',
    defaultValues: {
      title: book.title ?? '',
      description: book.description ?? '',
      categories:
        book.categories.map((elem) => {
          return { category: elem }
        }) ?? '',
      language: book.language ?? '',
      year: book.publicationYear ?? '',
    },
  })

问题是调用 api 请求时。网络负载将如下所示,因此无法发送到后端 enter image description here

stack overflow React-hook-form useFieldArray for an array of strings instead of objects
原文答案

答案:

作者头像

您可以调用已解构为 const 的 handleSubmit 函数(在代码段中的 control 上方)。您可以选择调用 handleSubmit 的位置 - 可能在表单上的按钮上 - 而不仅仅是调用 handleSubmit ,您可以包装一个回调,如下所示:

 onSave={(data) => handleSubmit(wrappedSubmit)}

在这种情况下, wrappedSubmit 只是一个接受 data 的回调。数据是 react-hook-form 传递给 handleSubmit 的参数对象。因此,您可以在 wrappedSubmit 回调中修改您的数据对象,并让 handleSubmit 获取结果。我必须做类似的事情。希望这可以帮助。

相关问题