React向Express后端推送数据时req.body显示undefined的问题求助

嘿，我帮你定位到了核心问题，顺便也整理了前端代码里需要修复的细节：

核心后端问题：中间件挂载顺序错误 #

你的app.listen()语句放在了中间件挂载之前！Express的中间件必须在路由和app.listen()之前注册，否则这些中间件不会被应用到后续的请求处理流程中。这就是为什么req.body是undefined——解析JSON请求体的json()中间件根本没生效。

修复后的server.js代码 #

const cors = require('cors') 
const { json } = require('body-parser') 
const express = require('express'); 
const app = express(); 
const port = process.env.PORT || 5000; 

// 先挂载所有中间件（必须在路由和listen之前）
app.use(cors()) 
app.use(json({limit:'50mb'})) 

// 再定义POST路由
app.post('/express_backend_post', (req, res) =>{ 
  console.log("req ", req.body); 
  // 记得给前端返回响应，否则前端请求会一直处于pending状态
  res.json({ status: 'success', receivedData: req.body });
})

// 最后启动服务
app.listen(port, () => console.log(`Listening on port ${port}`)); 

前端代码的优化建议（非核心问题，但会导致其他异常） #

虽然这些不是req.body为undefined的原因，但会影响你的React组件状态和请求结果处理：

1. 禁止直接修改React State
   你用this.state.data.push()和this.state.data.shift()直接修改state，React无法检测到状态变化，会导致组件无法正确重新渲染。应该通过setState()创建新的状态：

addNewItem = () =>{ 
  console.log("addNewItem"); 
  // 创建新的数组，避免直接修改原state
  const newItem = { 
    "name":"Tester seven", 
    "techs":["React & Redux", "Express", "MySQL"], 
    "description":"Lore, sed do eiusmod tempor incididunt ut labore et", 
    "checkin" :"08:00", 
    "checkout":"19:00", 
    "type":"Known Blacklisted" 
  };
  const updatedData = [...this.state.data, newItem];

  fetch('/express_backend_post', { 
    method: "POST", 
    headers: { "Content-Type": "application/json" }, 
    body: JSON.stringify(updatedData) 
  })
  .then(res => {
    // 块级作用域下必须手动return，否则下一个then拿到undefined
    return res.json(); 
  })
  .then(result =>{ 
    console.log("result ", result); 
    // 通过setState更新组件状态
    this.setState({ data: updatedData });
  })
  .catch(err => {
    // 增加错误捕获，方便调试
    console.error('请求出错:', err);
  });
}

2. Fetch请求的then链缺少return
   你第一个then里的res.json()没有返回，导致第二个then的result是undefined。可以改成简洁写法then(res => res.json())，或者在块里手动添加return。

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