ReactJS通过Express API传PDF到后端报Objects are not valid as a React child错误如何解决

你遇到的Objects are not valid as a React child报错，本质是直接将React JSX组件放在了Axios POST请求体中导致的。你的实现逻辑本身就存在两处核心问题：

• React组件是虚拟DOM对象，无法直接序列化为JSON格式传输到后端，序列化过程中触发React类型校验就会抛出你遇到的报错
• 后端没有前端运行时的状态变量（比如collname、delname、freightType等动态值）、@react-pdf/renderer运行环境和组件依赖，就算拿到组件也无法渲染出正确的PDF内容

推荐优先用「前端生成PDF流再上传后端」的方案，实现成本更低，不需要同步前端状态到后端：

步骤1：修改前端代码 #

先引入@react-pdf/renderer提供的pdf方法，先在前端把组件渲染成PDF二进制流，再封装为FormData传给后端：

import { pdf } from '@react-pdf/renderer';

const downloadPDF = async () => {
  // 前端先将组件渲染为PDF blob流
  const pdfBlob = await pdf(<MyDocument/>).toBlob();
  // 用FormData封装二进制文件
  const formData = new FormData();
  formData.append('pdfFile', pdfBlob, 'freight-waybill.pdf');
  // 发送上传请求
  Axios.post("http://localhost:3001/api/pdf", formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  }).then((res) => {
    alert("PDF上传保存成功");
    console.log(res);
  }).catch(err => console.error("上传失败", err))
}

步骤2：修改后端代码 #

后端需要处理multipart/form-data类型的文件上传请求，这里用成熟的multer中间件实现文件自动存储：
首先安装依赖：
npm install multer
修改接口代码：

const multer = require('multer');
const fs = require('fs');
const path = require('path');

// 配置PDF存储规则
const storage = multer.diskStorage({
  // 存储目录配置
  destination: function (req, file, cb) {
    const savePath = path.join(__dirname, 'pdf-storage');
    // 目录不存在则自动创建
    if (!fs.existsSync(savePath)) {
      fs.mkdirSync(savePath, { recursive: true });
    }
    cb(null, savePath);
  },
  // 存储文件名配置
  filename: function (req, file, cb) {
    // 用时间戳避免文件名重复
    cb(null, `${Date.now()}-${file.originalname}`);
  }
})
const upload = multer({ storage: storage })

// PDF保存接口，使用multer中间件处理单文件上传
app.post("/api/pdf", upload.single('pdfFile'), (req, res) => {
  if (!req.file) {
    return res.status(400).send("未接收到有效PDF文件");
  }
  res.send(`PDF保存成功，存储路径：${req.file.path}`);
});

备选方案 #

如果你需要后端负责PDF渲染，也可以把所有渲染PDF需要用到的动态变量（freightType、collname、delname等所有用到的状态值）打包传到后端，后端维护一份相同的MyDocument组件，拿到参数后调用ReactPDF.render生成PDF保存即可，该方案需要前后端同步组件和变量定义，维护成本更高，没有特殊需求不推荐使用。

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