无法通过axios.delete结合ProjectId删除MySQL表数据求助

核心错误点及修复 #

1. React父组件删除函数传递方式错误 #

在PluseProjects组件的列表渲染中，你直接执行了onDeleteId(gettingQuery.ProjectId)，这会导致组件一渲染就触发删除操作，而非点击按钮时执行。正确做法是传递一个回调函数，点击时再触发。

修正后的父组件列表渲染代码：

{getQuery.projectList.map((gettingQuery) => 
  <Projects   
    onHandleDelete={() => onDeleteId(gettingQuery.ProjectId)}
    ProjectId={gettingQuery.ProjectId}
    ProjectName={gettingQuery.ProjectName}
    Discription={gettingQuery.Discription}
    git={gettingQuery.git}
    Img={gettingQuery.Img}
  />
)}

同时，onDeleteId需处理异步逻辑，确保删除完成后再刷新列表：

async function onDeleteId(ProjectId) {
  try {
    await axios.delete(`http://localhost:3060/deleteprojects/${ProjectId}`);
    getProjectList(); // 删除成功后再刷新列表
  } catch (err) {
    console.error('删除失败:', err);
  }
}

2. Projects子组件点击事件绑定错误 #

子组件中onClick绑定到了props.ProjectId，这完全无效，应该使用父组件传递的onHandleDelete回调。

修正后的Projects组件代码：

import React from "react";
import "./Projects.css"
import {RxCrossCircled} from "react-icons/rx"

export default function Projects(props) {
    return(
        <div className="Project" >    
            <div className="Image">
                <img src={props.Img} alt="项目图片"/>
                <button className="cross" onClick={props.onHandleDelete}>
                  <RxCrossCircled />
                </button>
            </div>
            <div className="Bottom">
                <h3>{props.ProjectName}</h3>
                <p>{props.Discription}</p>
                <a href={props.git} target="_blank" rel="noopener noreferrer">{props.git}</a>
            </div>
        </div>
    )
};

（顺带修复了a标签href写死的问题，改为使用传递的props.git）

3. 后端SQL表名不一致+SQL注入风险+响应错误 #

• 表名大小写不一致：删除接口用newProjects，但查询/添加接口用newproject，MySQL在区分大小写的系统中会找不到表，统一为newproject
• SQL注入风险：原代码用字符串拼接SQL，极易被攻击，改为参数化查询
• 响应错误：回调参数覆盖了外层res变量，且未给前端返回明确响应

修正后的后端删除接口代码：

app.delete('/deleteprojects/:ProjectId', (req,res) => {
    const projectId = req.params.ProjectId;
    console.log('要删除的项目ID:', projectId);
    // 参数化查询避免SQL注入
    const DELETE_TASK = `DELETE FROM newproject WHERE ProjectId = ?`;
    db.query(DELETE_TASK, [projectId], (err, result) => {
        if (err) {
            console.error('删除出错:', err);
            return res.status(500).send('删除失败');
        }
        if (result.affectedRows === 0) {
            return res.status(404).send('未找到该项目');
        }
        res.send('删除成功');
    })
})

4. 后端端口日志错误 #

后端监听3060端口，但日志写的是3000，修正为：

app.listen(PORT, () => {
    console.log(`app is listening on port ${PORT}`)
})

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