React前端删除SQL表行失败问题排查求助

问题核心原因 #

你的删除功能失效，主要是这几个关键问题导致的：

• 前端删除函数没用到点击时传入的username，反而依赖初始为空的state变量，导致请求URL的参数无效
• 前端axios请求未处理成功/失败回调，完全无法排查请求状态
• 后端delete接口没有返回响应，前端无法确认操作结果
• useEffect缺少依赖数组，会触发无限重复请求

分步修复方案 #

1. 修正前端删除函数的参数传递 #

直接使用点击按钮时传入的username，不用依赖state，同时添加请求结果处理：

//Delete from database api request
const deleteRow = (username) => {
    axios.delete(`/users/delete/${username}`)
        .then(res => {
            console.log('删除成功:', res.data);
            // 删除后自动刷新列表
            axios.get('/users/get')
                .then(res => setRows(res.data))
                .catch(err => console.log(err));
        })
        .catch(err => {
            console.error('删除失败:', err);
        });
};

2. 修复useEffect无限请求问题 #

给useEffect添加空依赖数组，确保只在组件挂载时请求一次数据：

useEffect(() => {
    axios.get('/users/get')
        .then(res => {
            setRows(res.data);
        }).catch(err => {
        console.log(err);
    });
}, []); // 空数组作为依赖，仅执行一次

3. 后端添加响应返回 #

在delete接口中，操作完成后必须给前端返回结果，错误时也要返回错误状态：

//Delete from database
app.delete('/users/delete/:username', (req, res) => {
    const username = req.params.username;
    const deleteRow = "DELETE FROM users WHERE username = ?";

    // 参数用数组包裹，符合SQL查询参数传递规范
    db.query(deleteRow, [username], (err, result) => {
        if (err) {
            console.error('删除错误:', err);
            return res.status(500).json({error: '删除失败'});
        }
        console.log('deleted: ' + username);
        res.json({message: '删除成功', affectedRows: result.affectedRows});
    });
});

额外优化建议 #

• 数据库表建议给username加唯一约束，避免一次删除多行数据
• 前端渲染时不要展示password这类敏感字段
• 列表项的key不要用index，改用数据库表的唯一id字段，避免渲染异常

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