React按钮无法删除MongoDB数据：点击无响应问题排查

前端代码问题及修复 #

当前前端存在三个核心问题，导致按钮点击无反应：

• onClick绑定错误：() => this.deleteUser只是返回函数引用，并未执行，点击时不会触发函数逻辑。
• this指向丢失：类组件中普通函数的this默认不指向组件实例，直接调用会导致this.props无法访问。
• 请求方式与传参不规范：删除操作更适合用DELETE请求而非POST，且直接传id会导致后端无法正确解析参数。

修改后的前端代码：

import React, { Component } from 'react';
import { Button } from '../Button';
import axios from 'axios';

class DataTable extends Component {
    // 用箭头函数定义方法，自动绑定this指向
    deleteUser = (e) => {
        e.preventDefault();
        const userId = this.props.obj.id;

        // 使用DELETE请求，符合REST语义，通过URL传递ID
        axios.delete(`http://localhost:4000/users/deleteUser/${userId}`)
            .then(() => {
                alert('用户已删除');
                // 建议调用父组件回调更新列表，避免数据不同步
                this.props.onUserDeleted?.();
            })
            .catch(error => {
                console.error('删除失败：', error);
            });
    };

    render() {
        return (
            <tr>
                <td>{this.props.obj.name}</td>
                <td>{this.props.obj.company}</td>
                <td>
                    <Button 
                        onClick={this.deleteUser} // 直接传递绑定好的函数
                        className='btnsDelete'
                        buttonStyle='btn--delete'
                        buttonSize='btn--small'
                        buttonColour='red'
                    >
                        DELETE
                    </Button>
                </td>
            </tr>
        );
    }
}
export default DataTable;

后端代码问题及修复 #

后端同样存在两个关键问题：

• 路由与参数不匹配：当前路由未定义URL参数，req.params.id始终为undefined，无法获取要删除的用户ID。
• 响应方式错误：前端是AJAX请求，res.redirect('/')无效，需返回JSON格式的响应状态。

修改后的后端路由代码：

// 改用DELETE方法，同时在路由中定义ID参数
router.delete('/deleteUser/:id', async (req, res) => {
    try {
        const userId = req.params.id;
        console.log('待删除用户ID：', userId);
        
        const deletedUser = await user.findByIdAndRemove(userId).exec();

        if (!deletedUser) {
            console.log未找到要删除的用户');
            return res.status(404).json({ message: '用户不存在' });
        }

        console.log('用户已删除');
        res.status(200).json({ message: '删除成功' });
    } catch (error) {
        console.error('删除出错：', error);
        res.status(500).json({ message: '删除失败，请重试' });
    }
});

额外提示 #

• 前端删除成功后，一定要通知父组件更新用户列表，否则页面数据会和数据库不一致。
• 后端操作数据库时必须做异常捕获，避免服务器崩溃。
• 遵循REST规范：增用POST、删用DELETE、改用PUT、查用GET，代码可读性和维护性更高。

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