React+TS+Node全栈CRUD中POST请求req.body未定义错误解决

我使用ReactJs、Typescript、NodeJs、Express和MySQL开发全栈CRUD应用，在执行添加新商品的POST请求时出现错误，返回信息为：

TypeError: Cannot destructure property 'name' of 'req.body' as it is undefined

错误原因 #

• Express服务器代码顺序错误：app.listen(3001)被放在了路由和中间件定义之前，导致express.json()中间件还未生效就启动了服务器，无法解析JSON格式的请求体，最终req.body为undefined。
• 额外问题：删除路由错误使用app.put方法而非app.delete，后续执行删除操作会失效（非当前报错原因）。

解决方案 #

1. 调整Express代码顺序 #

将app.listen(3001)移到所有路由和中间件定义之后，确保中间件先加载并处理请求体。

2. 修复删除路由 #

把删除路由的app.put改为app.delete，并更新对应的SQL删除语句。

修改后的server.ts代码 #

const express = require("express");
const cors = require("cors");
const mysql = require("mysql");

const app = express();

app.use(cors());
app.use(express.json());

const connection = mysql.createConnection({
  host: "localhost",
  user: "root",
  password: "QwQvfQuFwaU$33^#gQ3oddDZ",
  database: "REGPROD",
});

connection.connect((err) => {
  if (err) {
    console.error("Error connecting to MySQL: ", err);
  } else {
    console.log("Success!");
  }
});

// Create
app.post('/products', (req, res) => {
  const { name, value, image } = req.body;
  
  const query = "INSERT INTO products (name, value, image) VALUES (?, ?, ?)";
  connection.query(query, [name, value, image], (err, result) => {
    if (err) {
      console.error("Error creating product: ", err);
      res.status(500).send("Error creating product");
    } else {
      res.status(201).send("Product created successfully");
    }
  });
});

// Read
app.get('/products', (req, res) => {
  const query = "SELECT * FROM products";
  connection.query(query, (err, results) => {
    if (err) {
      console.error("Error fetching products: ", err);
      res.status(500).send("Error fetching products");
    } else {
      res.status(200).json(results);
    }
  });
});

// Update
app.put('/products/:id', (req, res) => {
  const productId = req.params.id;
  const { name, value, image } = req.body;

  const query = "UPDATE products SET name=?, value=?, image=? WHERE id=?";
  connection.query(query, [name, value, image, productId], (err, result) => {
    if (err) {
      console.error("Error updating product: ", err);
      res.status(500).send("Error updating product");
    } else {
      res.status(200).send("Product updated successfully");
    }
  });
});

// Delete
app.delete('/products/:id', (req, res) => {
  const productId = req.params.id;

  const query = "DELETE FROM products WHERE id=?";
  connection.query(query, [productId], (err, result) => {
    if (err) {
      console.error("Error deleting product: ", err);
      res.status(500).send("Error deleting product");
    } else {
      res.status(200).send("Product deleted successfully");
    }
  });
});

// 移到最后启动服务器
app.listen(3001, () => {
  console.log("Server running on 3001");
});

验证说明 #

修改完成后重启Express服务器，前端发送的JSON请求体将被express.json()正确解析，req.body会包含name、value、image字段，解构操作可正常执行，添加商品的POST请求能正常完成。

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