Redux Toolkit项目添加购物车触发栈溢出错误求助

错误根源 #

在Product.js的handleAddCart函数中，你错误地在函数内部递归调用了自身，导致触发无限循环，最终超出调用栈限制：

const handleAddCart = (item) => {
  dispatch(handleAddCart(item)); // 此处递归调用了当前函数，而非Redux定义的action
};

修复步骤 #

1. 导入正确的Redux Action

在Product.js顶部补充导入cartSlice中定义的addToCart action：

import { addToCart } from "../redux/slice/cartSlice";

2. 修正handleAddCart函数

将函数内的递归调用替换为dispatch正确的Redux action：

const handleAddCart = (item) => {
  dispatch(addToCart(item)); // 触发cartSlice中定义的addToCart操作
};

3. 额外修复cartSlice中的逻辑错误

你的cartSlice.js里removeFromCart reducer写法有误，state是包含cart数组的对象，不能直接返回filter结果，需修改为：

removeFromCart: (state, action) => {
  state.cart = state.cart.filter((item) => item.id !== action.payload);
},

效果验证 #

完成上述修改后，点击「添加到购物车」按钮会正确触发Redux的addToCart action，将商品添加到购物车，不会再出现栈溢出错误。

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