[英]How to filter and delete an item by using redux toolkit
When I click the delete button on each item, I want to remove the item with a filter.当我单击每个项目上的删除按钮时,我想使用过滤器删除该项目。 But I don't know how to solve it correctly.但我不知道如何正确解决它。 I'm a bit confused at this point.在这一点上我有点困惑。 hope someone can explain this.希望有人能解释一下。 Thanks a lot.非常感谢。
cartSlice.js cartSlice.js
const cartSlice = createSlice({
name: 'cart',
initialState:{
products: [],
quantity: 0,
total: 0,
},
reducers: {
deleteItem: (state, action) => {
//filter right here
state.products = action.payload.idItem;
state.quantity -= 1;
state.total -= action.payload.price * action.payload.quantity;
},
},
});
Cart.jsx购物车.jsx
const Cart = (props) => {
const dispatch = useDispatch();
const cart = useSelector((state) => state.cart);
const items = useSelector((state) => state.cart.products);
const handleDeleteItem = (idItem, price, quantity) => {
const filter = items.filter((item) => item.itemId !== idItem);
console.log('idItem', idItem);
console.log('filter', filter);
dispatch(deleteItem({ idItem, price, quantity }));
};
return (
<>
{cart.products.map((product) => (
<tr className={styles.body} key={product._id}>
<td className={styles.column}>
<span className={styles.quantity}>{product.quantity}</span>
</td>
<td className={styles.column}>
<span className={styles.total}>${product.price * product.quantity}</span>
</td>
<td className={styles.column}>
<button
onClick={() => handleDeleteItem(product.idItem, product.price, product.quantity)}
className={styles.deleteItem}
>
Delete
</button>
</td>
</tr>
))}
</>
);
};
export default Cart;
In your reducer you say, the new product is the idItem key:在你说的减速器中,新产品是 idItem 键:
reducers: {
deleteItem: (state, action) => {
//filter right here
state.products = action.payload.idItem;
state.quantity -= 1;
state.total -= action.payload.price * action.payload.quantity;
},
},
But in your cart, you don't pass the filter as parameters:但是在您的购物车中,您没有将过滤器作为参数传递:
const handleDeleteItem = (idItem, price, quantity) => {
const filter = items.filter((item) => item.itemId !== idItem);
console.log('idItem', idItem);
console.log('filter', filter);
dispatch(deleteItem({ idItem, price, quantity }));
};
Shouldn't it be不应该是
const handleDeleteItem = (idItem, price, quantity) => {
const filter = items.filter((item) => item.itemId !== idItem);
dispatch(deleteItem({ idItem: filter, price, quantity }));
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.