React使用useForm提交嵌套对象时子字段被转义为字符串如何解决

架构老林

2026-9-27

问题根源

你提前对category字段执行了JSON.stringify，相当于提前把嵌套对象转成了字符串类型。当你提交完整请求体再做整体JSON序列化的时候，字符串类型的category会被自动加上双引号、内部的双引号会被加转义反斜杠，最终就变成了你看到的错误结构。

解决方案

1. 直接在useForm中嵌套对象（最推荐）

useForm本身支持嵌套字段的定义，不需要提前序列化category：

注册字段的时候直接用嵌套写法，比如register("category.id")、register("category.name")、register("category.description")
提交时handleSubmit拿到的values里的category本身就是标准对象，不需要额外处理，直接整体序列化提交即可
示例代码：

const { register, handleSubmit } = useForm();

const onSubmit = (values) => {
  // 这里values.category已经是对象，直接用就行
  fetch("/your/api", {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify(values)
  })
}

// 表单里的输入示例
<input {...register("name")} placeholder="菜品名称" />
<input {...register("category.id")} placeholder="分类ID" />
<input {...register("category.name")} placeholder="分类名称" />

2. 提交前反序列化category（适合已提前序列化的场景）

如果你因为业务逻辑必须提前把category转成字符串存入useForm，那就在提交前手动把category字段转回对象：

const onSubmit = (values) => {
  // 把字符串类型的category转回对象
  const formattedValues = {
    ...values,
    category: JSON.parse(values.category)
  }
  // 再序列化formattedValues提交即可
  fetch("/your/api", {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify(formattedValues)
  })
}