如何删除本地存储数组中单个商品并将表格居中显示

一、修复单个商品删除功能 #

原删除函数的核心问题是变量名冲突，filter回调内的product参数和外层变量重名，导致product.id !== product.id恒为false，最终清空整个心愿单。修改后的代码如下：

修正后的删除函数 #

// 接收要删除的商品ID作为参数，避免变量名冲突
function deleteWish(productId) {
  const wishlist = getWishlist();
  // 使用item作为回调参数，对比传入的目标ID
  const updateWish = wishlist.filter((item) => item.id !== productId);
  saveWish(updateWish);
}

// 确保点击按钮时正确传递ID并更新组件状态
function handleDeleteFromWish(productId) {
  deleteWish(productId);
  // 重新获取更新后的心愿单，触发组件刷新（根据你的状态管理方式调整）
  // setWishlist(getWishlist());
}

二、实现表格水平居中 #

原CSS未给容器设置自动外边距，导致无法居中。通过调整容器样式实现居中：

修正后的CSS #

.container-13{
    max-width: 1000px;
    /* 左右外边距设为auto，实现容器水平居中 */
    margin: 0 auto;
}

.buttonDelete{
    background-color: red;
    color: white;
}

.tabletable{
    margin-top: 30px;
    width: 100%; /* 让表格占满容器宽度 */
}

额外修正：组件拼写错误 #

Table标签上的arial-labe是拼写错误，应改为aria-label，提升可访问性：

<Table className="tabletable" sx={{minWidth: 650 }} aria-label="simple table">

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