React中使用FormData提交PDF文件打印FormData为空问题咨询

问题原因汇总 #

• 事件回调绑定不匹配：你在文件输入框中绑定的onChange回调是uploadFile，但实际定义的文件处理函数名称为uploadImage，名称不一致导致选择文件后逻辑根本没有触发，file状态始终是初始的undefined，往FormData中追加undefined自然不会生成有效键值对。
• FormData 打印方式错误：即使前面的赋值逻辑全部正确，直接使用console.log(formData)也只会输出FormData {}，因为FormData是特殊的可迭代对象，控制台默认不会序列化展示它的内部键值。你可以用以下方式校验内容：

  // 读取指定键的值
  console.log(formData.get('File'))
  // 遍历所有键值对
  for (const [key, value] of formData.entries()) {
    console.log(`${key}: ${value}`)
  }
  

• 状态更新异步问题：React的setState是异步执行的，如果你在选择文件后同步调用提交函数，此时file状态可能还未完成更新，读取到的还是初始的空值。这种场景建议直接把e.target.files[0]作为参数传递给提交函数，避免依赖state的异步更新。

内容的提问来源于stack exchange，提问作者Jose A.