React函数组件Hooks配合FormData使用时获取空值问题求助

• 核心错误：你在fetch请求的头部手动指定了Content-type: 'application/json'，但实际发送的请求体是FormData类型，二者完全不匹配。
  发送FormData时不需要手动设置Content-Type，浏览器会自动生成带boundary分隔符的正确multipart/form-data请求头，你手动设置为JSON类型后，后端无法正确解析请求体，就会返回空数据。直接删除headers里的Content-type配置即可。
• 校验点1：确认所有表单输入控件的name属性和profilestate中定义的key完全一致，比如城市输入框的name属性为city、年龄输入框的name属性为age，否则handleChange无法正确更新对应状态，构造FormData时就会读取到初始的空值。
• 校验点2：不要直接打印FormData对象判断是否为空，FormData是内置可迭代对象，直接打印无法看到内部存储的键值对，可通过以下方式遍历校验：

for (const [key, value] of formdata.entries()) {
  console.log(`${key}: ${value}`)
}

• 注意点：构造FormData和发送请求的逻辑要放在表单提交的事件处理函数中，不要直接写在组件顶层，避免组件渲染时直接执行逻辑读取到未更新的初始状态。

修正后的请求代码示例：

const response = await fetch(Constants.url + 'auth/addUserDetail', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${JSON.parse(localStorage.getItem('token'))}`
  },
  body: formdata
});

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