添加商品至购物车后购物车始终为空的问题排查求助

1. 路由参数不匹配（核心问题） #

你的App.js中购物车路由定义的参数是:id：

<Route path="/cart/:id" element={<CartScreen />} />

但在CartScreen.js中却尝试获取productId参数：

const { productId } = useParams();

这会导致productId始终为undefined，useEffect里的addToCart dispatch根本不会执行，自然无法添加商品到购物车。

修复：
把CartScreen里的参数获取改成：

const { id } = useParams();

同时修改useEffect里的逻辑：

useEffect(() => {
  if (id) {
    dispatch(addToCart(id, quantity));
  }
}, [dispatch, id, quantity]);

2. 检查API请求是否正常 #

addToCart action中通过axios请求/api/products/${id}获取商品详情，如果这个接口返回失败（比如404、500），后续的dispatch和localStorage存储步骤都不会执行。

验证方式：
在浏览器控制台查看Network面板，确认点击添加购物车后是否有/api/products/xxx的请求，以及返回状态是否为200。如果请求失败，需要先修复后端接口，或者在action中添加错误处理：

export const addToCart = (id, quantity) => async (dispatch, getState) => {
  try {
    const { data } = await axios.get(`/api/products/${id}`);

    dispatch({
      type: CART_ADD_ITEM,
      payload: {
        product: data._id,
        name: data.name,
        image: data.image,
        price: data.price,
        countInStock: data.countInStock,
        quantity,
      },
    });
    localStorage.setItem("cartItems", JSON.stringify(getState().cart.cartItems));
  } catch (error) {
    console.error("添加购物车失败：", error);
  }
};

3. 组件名拼写错误（潜在问题） #

你在多个文件中将CartScreen拼写成了CartSreen（少了一个字母c）：

• App.js导入：import CartScreen from "./components/screens/CartSreen";
• CartScreen.js导出：export default CartSreen;
  虽然当前不会导致功能问题，但后续维护容易出错，建议统一修正为CartScreen。

4. 验证Redux状态更新 #

可以通过Redux DevTools查看点击添加购物车后，是否有CART_ADD_ITEM action被触发，以及cart状态是否更新。如果action触发但状态没更新，检查cartReducer的逻辑是否正确（目前看你的reducer逻辑是正常的）。

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