用于字符串数组而不是对象的Reaction-Hook-Form useFieldArray

mrphzbgm  于 2022-10-15  发布在  React
关注(0)|答案(1)|浏览(141)

我正在使用useFieldArray从我的后端API获取默认值。我的类别是一个字符串数组。但是,Reaction-Hook-Form只支持对象数组。这是我的 Mongoose 的图式

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请求。网络有效负载将如下所示,因此无法发送到后端

qncylg1j

qncylg1j1#

您可以调用已解构为常量的handleSubmit函数(在代码片段中的control之上)。您可以选择在哪里调用handleSubmit--可能是在表单上的按钮上--而不是只调用handleSubmit,您可以 Package 一个回调,如下所示:

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

在本例中,wrappedSubmit只是一个接受data的回调。Data是React挂钩形式传递给handleSubmit的参数对象。因此,您可以在wrappedSubmit回调中修改数据对象,并让handleSubmit获取结果。我必须做一些类似的事情。希望这能帮上忙。

相关问题