使用JavaScript删除电商网站购物车商品的实现问题（Redux Toolkit+Next.js）

问题&修复点 #

1 Redux slice逻辑错误 #

你写的removeFromBasket reducer存在两处错误：

• 判断条件写的是赋值操作if (index = 0)，不是相等判断，且findIndex找不到对应商品时会返回-1，正确的判断应该是index >= 0
• 警告日志没有打印对应删除失败的商品id，不方便调试

2 结算页触发删除的逻辑错误 #

你写的删除函数存在两处错误：

• 错误重复调用useDispatch这个React Hook，应该使用你已经声明的dispatch实例
• 没有把removeFromBasket action传入dispatch执行
  另外还顺手修正了原代码里classNane的拼写错误，改为正确的className

完整修正后的代码 #

修正后的basketSlice代码 #

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  items: [],
};

export const basketSlice = createSlice({
  name: "basket",
  initialState,
  reducers: {
    addToBasket: (state, action) => {
      state.items = [...state.items, action.payload]
    },
    removeFromBasket: (state, action) => {
      const index = state.items.findIndex(
        (basketItem) => basketItem.id === action.payload.id
      );
      let newBasket = [...state.items]
      if (index >= 0) {
        newBasket.splice(index, 1)
      } else {
        console.warn(
          `无法删除id为${action.payload.id}的商品，该商品不在购物车中`
        )
      }
      state.items = newBasket;
    },
  },
});

export const { addToBasket, removeFromBasket } = basketSlice.actions;

export const selectItems = (state) => state.basket.items;

export default basketSlice.reducer;

修正后的CheckoutProduct代码 #

import Image from "next/image";
import { useDispatch } from "react-redux";
import { removeFromBasket, addToBasket } from "../slices/basketSlice";
import products from "../product/MenShoes/MenShoes";

function CheckoutProduct({ id, image, name, price, size}) {
    const dispatch = useDispatch();
   
    const removeItemFromBasket = () => {
       dispatch(removeFromBasket({ id }))
    };
    
    return (
        <div className="product">
            <Image src={image} width={400} height={400} objectFit="contain" />
            <div className="">
                <p>{name}</p>
                <p>{id}</p>
                <p>{price}</p>
                <p>{size}</p>
                <button className="button" onClick={removeItemFromBasket}>Remove from cart</button>
            </div>
        </div>
    )
}

export default CheckoutProduct

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