React中new FormData无法追加数据，控制台打印显示为空对象

1. FormData本身的打印方式错误 #

• FormData是浏览器内置的特殊可迭代对象，不支持直接通过console.log()打印内部存储的键值对，你看到的空对象{}是浏览器序列化输出的结果，不代表数据没有被成功追加。
• 正确查看FormData内容的方法：
  • 查看单个字段：console.log(formData.get('firstName'))
  • 遍历所有字段：

    for (let [key, value] of formData.entries()) {
      console.log(key, value)
    }
    

  • 转成普通对象打印：console.log(Object.fromEntries(formData))

2. React Hook Form 对文件输入的取值逻辑问题 #

• 你通过register注册的type="file"输入框，返回的data.picture是FileList类数组对象，不是单个File文件实例，直接追加整个FileList到FormData不会得到预期的文件数据。
• 修正方法：取FileList的第一个元素追加到FormData即可：

  formData.append("picture", data.picture[0])
  

完整修正代码 #

const { register, handleSubmit } = useForm()

const onSubmit = async (data) => {
  const formData = new FormData()
  formData.append("picture", data.picture[0])
  formData.append("firstName", data.firstname)

  // 正确打印内容验证
  for (let [key, value] of formData.entries()) {
    console.log(key, value)
  }
  // 发起请求时直接传递formData即可，无需额外转换，请求库会自动处理multipart/form-data格式
}

return (
  <form onSubmit={handleSubmit(onSubmit)}>
    <input {...register('picture')} type="file"  />
    <input {...register('firstname')}  />
    <button>Submit</button>
  </form>
)

内容的提问来源于stack exchange，提问作者ASIF KAIF