React向API上传文件报错：Objects are not valid as a React child

错误核心原因 #

这个报错本质是你在JSX中直接渲染了对象类型的值（比如File对象、FormData实例），React无法将对象作为子元素解析渲染。选择下拉简历时传递的是resumeId（字符串/数字类型），属于React可直接渲染的基本类型，因此不会触发问题；但上传文件时，组件逻辑里大概率把File对象或包含文件的对象直接放到了渲染输出中。

排查与修复步骤 #

1. 检查文件上传组件的渲染逻辑 #

找到上传文件后展示文件信息的代码，避免直接渲染File对象：

// 错误示例：直接渲染File对象
<div>已选择文件：{selectedFile}</div>

// 正确写法：渲染文件的字符串属性（如文件名）
<div>已选择文件：{selectedFile ? selectedFile.name : '未选择'}</div>

2. 移除对FormData的直接渲染 #

上传文件时使用FormData是正确的，但绝对不要在JSX中渲染FormData实例：

// 错误示例
{formData && <div>表单数据：{formData}</div>}

// 正确写法：替换为提示文字或移除该渲染代码
{formData && <div>已准备好文件待提交</div>}

3. 检查条件渲染中的对象传递 #

如果有子组件接收文件相关对象，确保子组件没有直接渲染整个对象，而是取其属性：

// 错误示例：子组件直接渲染传入的File对象
<UploadStatus file={selectedFile} />

// 子组件内修正写法
const UploadStatus = ({ file }) => {
  return <div>上传中：{file.name}</div>; // 渲染文件名而非整个File对象
};

4. 确认状态值的渲染边界 #

检查组件状态中是否有对象类型的值被意外渲染，比如：

// 错误示例：state存了File对象并直接渲染
const [formState, setFormState] = useState({ resume: null });
// ...
<div>当前简历：{formState.resume}</div>

// 正确写法：只渲染需要的属性
<div>当前简历：{formState.resume ? formState.resume.name : '无'}</div>

典型错误代码修正示例 #

假设你的上传组件有如下错误逻辑：

const ResumeUpload = () => {
  const [selectedFile, setSelectedFile] = useState(null);

  const handleFileChange = (e) => {
    setSelectedFile(e.target.files[0]);
  };

  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      {/* 错误：直接渲染File对象 */}
      {selectedFile && <div>已选文件：{selectedFile}</div>}
    </div>
  );
};

修正后：

const ResumeUpload = () => {
  const [selectedFile, setSelectedFile] = useState(null);

  const handleFileChange = (e) => {
    setSelectedFile(e.target.files[0]);
  };

  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      {/* 正确：渲染文件名称属性 */}
      {selectedFile && <div>已选文件：{selectedFile.name}</div>}
    </div>
  );
};

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