React父组件CoachingService向子组件UploadModal传formData为空问题

核心排查方向及解决方法 #

1. 别被FormData的打印结果误导 #

FormData是不可枚举的特殊对象，直接console.log(formData)只会显示空对象，必须通过遍历或get方法查看实际内容：

// 正确查看FormData内容的方式
for (let [key, value] of formData.entries()) {
  console.log(`${key}:`, value);
}
// 或者单独查看某个字段
console.log(formData.get('yourFieldName'));

先确认父组件内的FormData实际是否有数据，再排查传递问题。

2. 父组件未正确填充FormData #

检查父组件初始化FormData后，是否调用append()添加了字段：

// 父组件正确填充FormData示例
const formData = new FormData();
// 必须通过append添加键值对
formData.append('title', '课程标题');
formData.append('attachment', fileInstance);
// 再传递给子组件
<UploadModal formData={formData} />

如果仅初始化new FormData()未添加任何内容，传递给子组件自然为空。

3. 未将FormData纳入React状态管理 #

若父组件的FormData是普通变量，更新时不会触发组件重渲染，子组件无法接收最新数据。需用useState管理：

import { useState } from 'react';

function CoachingService() {
  const [formData, setFormData] = useState(new FormData());

  // 更新FormData必须创建新实例，否则React检测不到变化
  const updateFormField = (key, value) => {
    const newFormData = new FormData(formData);
    newFormData.append(key, value);
    setFormData(newFormData);
  };

  return (
    <div>
      <input 
        type="text" 
        onChange={(e) => updateFormField('username', e.target.value)} 
      />
      <UploadModal formData={formData} />
    </div>
  );
}

4. 子组件接收Props的错误 #

检查子组件是否正确解构或访问props：

// 子组件正确接收示例
function UploadModal({ formData }) {
  const handleSubmit = () => {
    // 提交前再次验证FormData内容
    for (let [key, value] of formData.entries()) {
      console.log(key, value);
    }
    // 发起请求
    fetch('/api/submit', {
      method: 'POST',
      body: formData
    });
  };

  return <button onClick={handleSubmit}>提交</button>;
}

注意props的大小写（比如别把formData写成formdata），避免因解构错误拿到空值。

5. 提交请求的Header设置错误 #

若确认FormData有内容但提交Payload为空，大概率是手动设置了错误的请求头。FormData提交时，浏览器会自动设置multipart/form-data头，无需手动指定：

// 错误写法：手动设置JSON头会导致FormData解析失败
fetch('/api/submit', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: formData
});

// 正确写法：让浏览器自动处理请求头
fetch('/api/submit', {
  method: 'POST',
  body: formData
});

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