React+Express删除表单报错：formId为undefined的解决求助

问题现象 #

实现管理员删除表单功能时，未成功删除表单，浏览器报错：http://localhost:5000/backend/users/undefined 404 (Not Found)，后端返回信息：{message: 'Form not found'}。需确认props传递formId的方式是否正确，并修复删除功能。

路由文件：users.js #

const express = require("express");
const { getUser, deleteForm } = require("../controller/user.js");

const router = express.Router();

router.get("/find/:username", getUser);
router.delete("/:formId", deleteForm)

module.exports = router;

控制器文件：user.js #

const { db } = require("../connect.js");


exports.getUser = function(req, res) {
  const username = req.params.username;
  const q = "SELECT * FROM  users WHERE username=?";

  db.query(q, [username], function(err, data) {
    if (err) return res.status(500).json(err);
    const { password, ...info } = data[0];
    return res.json(info);
    
  });
  console.log(username)
};


exports.deleteForm = function(req, res) {
  const formId = req.params.formId
  const q = "DELETE FROM form WHERE id = ?";
  db.query(q, [formId], function (err, result) {
    if (err) {
      return res.status(500).json(err);

    }
    if (result.affectedRows === 0) {
      return res.status(404).json({message:"Form not found"})
    }
    return res.json({message: "Form deleted successfully"})
  })

}

React组件：Admin.jsx #

import React from 'react';
import Dashboard from '../../Components/Dashboard/Dashboard';
import Logout from '../../Components/Logout/Logout';



const Admin = ({formId}) => {
  function deleteForm(e, formId) {
    e.preventDefault();
    console.log(formId)
    fetch(`http://localhost:5000/backend/users/${formId}`, {
        method: "DELETE"
    })
    .then((result) => result.json())
    .then((resp) => {
      console.warn(resp);
      if (resp.message === "Form deleted successfully") 
        
        localStorage.clear();
       
      
    })
    .catch((error) => {
      console.error(error);
    });
}
  
  return (
    <div>
      <Logout/>
      <Dashboard/>
      <button onClick={(e) => deleteForm(e, formId)} className="delete-button">
        Delete FORM
      </button>
      
    </div>
  )
}

export default Admin;

问题原因与修复方案 #

核心问题：formId传递异常 #

URL中的undefined说明删除接口接收的formId未正确获取，根源有两点：

1. 函数参数遮蔽：deleteForm内部声明的formId参数，遮蔽了组件props传入的同名值，若调用时传递的参数无效，就会导致接口路径错误。
2. 未校验props有效性：父组件可能未正确传递formId，导致组件接收的值本身就是undefined。

修复步骤 #

1. 移除函数内部的formId参数
   修改Admin.jsx中的deleteForm函数，直接使用组件props的formId，避免参数遮蔽：

   function deleteForm(e) {
     e.preventDefault();
     console.log(formId)
     fetch(`http://localhost:5000/backend/users/${formId}`, {
         method: "DELETE"
     })
     // 后续逻辑保持不变
   }
   

   同时更新按钮点击事件：

   <button onClick={(e) => deleteForm(e)} className="delete-button">
     Delete FORM
   </button>
   

2. 校验props传入的formId
   在Admin组件中添加前置校验，避免无效操作：

   const Admin = ({formId}) => {
     if (!formId) {
       console.error("formId未正确传入");
       return <div>缺少表单ID，无法执行删除操作</div>;
     }
     // 后续逻辑保持不变
   }
   

   同时检查父组件，确保传递的formId是合法的数值或字符串。

3. 后端接口格式校验（可选）
   为避免无效请求，后端可先校验formId格式：

   exports.deleteForm = function(req, res) {
     const formId = req.params.formId;
     if (isNaN(parseInt(formId))) {
       return res.status(400).json({message: "无效的表单ID"});
     }
     const q = "DELETE FROM form WHERE id = ?";
     db.query(q, [parseInt(formId)], function (err, result) {
       // 后续逻辑保持不变
     })
   }
   

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