在React JS + .NET Core项目中如何实现数据库行删除？

前端React代码修正 #

你的handleDelete存在几处语法和逻辑问题，修正后代码如下：

const handleDelete = (id) => {
    if (window.confirm("确定要删除这个员工吗？")) {
        fetch(`/api/product/DeleteProduct/${id}`, {
            method: 'DELETE',
            headers: { // 修正拼写：header → headers
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            }
        })
        .then(result => {
            if (!result.ok) throw new Error('请求失败');
            return result.json(); // 修正语法：json是方法，需加()
        })
        .then(resp => {
            console.warn(resp);
            // 删除成功后更新本地列表，自动刷新页面
            setProducts(prevList => prevList.filter(item => item.id !== id));
        })
        .catch(err => {
            console.error('删除出错:', err);
            alert('删除失败，请稍后重试');
        });
    }
};

修正点说明 #

• 把header改为复数headers，符合Fetch API规范
• 修复result.json.then的语法错误，改为result.json()
• 增加请求状态校验和错误捕获，避免无响应情况
• 删除成功后通过setProducts更新本地状态，无需重新请求整个列表

后端.NET Core控制器修正 #

你的DeleteProduct方法不符合API接口设计规范，且存在资源泄漏风险，修正后代码如下：

// 先通过构造函数注入DbContext（.NET Core最佳实践）
private readonly NavbaseContext _db;

public ProductController(NavbaseContext db)
{
    _db = db;
}

[HttpDelete("DeleteProduct/{id}")] // 明确标记HTTP DELETE请求
public async Task<IActionResult> DeleteProduct(int id)
{
    // 异步查询提升并发性能
    var existingProduct = await _db.Products.FirstOrDefaultAsync(temp => temp.Id == id);
    
    // 处理产品不存在的情况
    if (existingProduct == null)
    {
        return NotFound(new { Message = "产品不存在" });
    }
    
    _db.Products.Remove(existingProduct);
    await _db.SaveChangesAsync(); // 异步保存数据
    
    // 返回JSON格式响应，方便前端处理
    return Ok(new { Message = "删除成功", DeletedId = id });
}

修正点说明 #

• 使用依赖注入获取NavbaseContext，避免手动实例化导致的资源泄漏
• 改用异步数据库操作，提升应用并发能力
• 增加产品不存在的判断，返回NotFound状态码
• 替换RedirectToAction为JSON响应，符合API接口设计原则，便于前端处理结果

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