React组件使用FormData发送POST请求时后端接收参数为undefined的问题排查

看起来你遇到了一个典型的「前端发了数据但后端没收到」的问题，别着急，咱们一步步来排查：

第一步：先确认前端的FormData是不是真的包含了正确的字段 #

你现在用console.log打印了拼接后的字符串，但这没法直接反映FormData的实际内容。建议在formData.append之后，直接打印FormData的结构：

// 在handleSendClick里，append完所有字段后添加
console.log([...formData]);

这会输出一个包含所有键值对的数组，比如：

[
  ['date', '2024-02-29T14:18:31.178Z'],
  ['author', 'Dorothy Kovalsky Parker'],
  ['content', 'fsd fs sdf sdff']
]

如果这个输出里没有这三个字段，那说明前端的append操作有问题；如果输出正常，那问题大概率在后端的解析逻辑上。

第二步：替换DOM获取内容的方式，改用状态变量 #

你现在通过document.querySelector("#content").textContent获取内容，但其实你已经用useState的text变量跟踪了输入内容，直接用状态变量更可靠（避免DOM操作的异步问题）：

// 把原来的const content = ...替换成
const content = text.trim() === placeholder ? '' : text;

毕竟contentEditable的DOM内容有时候会有隐藏的空白字符或者同步延迟，用状态变量能保证拿到的是最新的用户输入。

第三步：检查后端的请求解析中间件 #

既然Postman用form-data格式能成功，说明后端的路由和Schema是没问题的，但可能中间件的配置有问题：

• 如果你的后端是Express，要确保已经配置了解析multipart/form-data的中间件（比如multer），并且在路由之前使用：

  const multer = require('multer');
  const upload = multer(); // 不需要处理文件的话，用默认配置即可
  app.use(upload.none()); // 解析普通表单字段到req.body
  

  注意：别手动在前端设置Content-Type: multipart/form-data，浏览器会自动为FormData请求添加正确的Content-Type（包含boundary标识），手动设置反而会导致后端无法解析。
• 确认后端的路由处理函数是从req.body里读取date、author、content，而不是req.query或者其他位置。

第四步：排查fetch请求的错误处理 #

你现在的try/catch只能捕获网络错误，HTTP 500这类响应错误不会触发catch。可以给fetch加个响应处理，看看后端返回的具体细节：

try {
  const response = await fetch('http://localhost:5000/posts', {
    method: 'POST',
    body: formData,
  });
  // 看看后端返回的具体内容
  const responseData = await response.json();
  console.log('后端响应:', responseData);
} catch (error) {
  console.log('请求错误:', error);
}

按照这几步排查下来，应该能找到问题所在。大概率是前端获取内容的方式不够可靠，或者后端的中间件配置顺序有问题。

备注：内容来源于stack exchange，提问作者tensymbols