为何Post请求无报错但req.body为空？技术求助

核心错误点 #

• 前端POST数据错误：你当前发送的是旧的todos数组（此时新输入的val还没加入数组），而非用户刚输入的待办项；同时setTodos是异步操作，不会在POST请求前更新数组，导致后端拿到的不是目标数据。
• 后端无数据库插入逻辑：你的POST接口仅打印并返回数据，没有执行插入数据库的代码，数据根本没存入DB。
• 端口日志错误：后端监听8000端口，但启动日志写的是5174，容易造成混淆。

分步修复 #

1. 修正前端POST请求 #

将发送的数据改为当前输入的val，而非旧数组，同时用数据库返回的数据更新本地状态，保证一致性：

const addTodos = async (e) => {
  if (val == "") return;
  e.preventDefault();

  await axios
    // 发送单个待办项，而非整个数组
    .post("http://localhost:8000/message", { todo: val })
    .then((response) => {
      console.log(response);
      setTodos([...todos, response.data.todo]);
    })
    .catch((error) => console.log(error));

  setVal("");
};

2. 修正后端POST接口，添加数据库插入逻辑 #

更新接口逻辑，实现数据插入并处理错误：

app.post("/message", async (req, res) => {
  const { todo } = req.body;
  // 校验输入合法性
  if (!todo) {
    return res.status(400).json({ error: "待办内容不能为空" });
  }
  try {
    // 插入数据并返回插入后的完整记录
    const { rows } = await client.query(
      `INSERT INTO todo (todo) VALUES ($1) RETURNING *`,
      [todo]
    );
    console.log("已存入数据库的待办项:", rows[0]);
    return res.status(201).json(rows[0]);
  } catch (err) {
    console.error("数据库插入失败:", err);
    return res.status(500).json({ error: "服务器内部错误" });
  }
});

3. 修正后端端口日志 #

把启动日志的端口改成实际监听的8000：

app.listen(8000, () => {
  console.log(`Server is running on port 8000.`);
});

额外建议 #

• 前端useEffect的依赖数组可添加todos，或者直接用POST返回的数据更新状态，减少不必要的GET请求。
• 数据库操作建议封装成单独模块，便于后续维护。

内容的提问来源于stack exchange，提问作者jj-ammar