如何删除后端服务器数组中的商品？React+Node.js场景求助

前端代码问题修复 #

• 按钮点击绑定错误：当前代码里的onClick={deleteClick(product.id)}会在组件渲染时直接执行删除函数，而非点击按钮时触发。同时按钮嵌套在带有点击事件的父div中，会触发事件冒泡导致跳转页面。修改为：

  <button onClick={(e) => {
    e.stopPropagation(); // 阻止事件冒泡到父div
    deleteClick(product.id);
  }}>Delete</button>
  

• deleteClick函数逻辑错误：
  1. 字段大小写不匹配：后端返回的id是小写id，但代码里用了item.Id，导致无法找到对应商品索引；
  2. 直接修改原状态数组：React状态不可直接修改，splice会改变原数组，应该创建新数组更新状态；
  3. 未调用后端删除接口：仅修改前端状态不会同步到后端，刷新后商品会恢复。修改后的函数：

  const deleteClick = async (id) => {
    try {
      // 调用后端删除接口
      await axios.delete(`${process.env.REACT_APP_API_SERVER}/products/${id}`);
      // 过滤掉已删除的商品，生成新数组更新状态
      const updatedProducts = products.filter(item => item.id !== id);
      setProducts(updatedProducts);
    } catch (err) {
      console.error('删除失败:', err);
    }
  };
  

后端代码问题修复 #

控制器缺少删除商品的方法，需要添加deleteOne接口实现后端数据删除：

async deleteOne(req, res) {
  const id = req.params.productId;
  try {
    await this.model.destroy({
      where: { id: id }
    });
    return res.json({ success: true, msg: '商品已删除' });
  } catch (err) {
    console.log(err);
    return res.status(400).json({ error: true, msg: err });
  }
}

同时需要在路由配置中添加对应的DELETE请求映射（示例）：

const router = require('express').Router();
const ProductsController = require('./controller');
const productsController = new ProductsController(你的商品模型);

router.delete('/products/:productId', productsController.deleteOne);

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