所以我在一个电子商务网站上工作,这是购物车。我可以添加项目,但是删除不能正常工作。我的状态中有cartItems。我可以向cartItems数组添加项目(每个项目都是具有ID,名称,价格等的对象)。每个项目都在模态中显示,带有数量和一个删除按钮。当我单击“删除”按钮时,该项目不会消失,而应该消失。我正在控制台记录日志以进行调试,并且在减速器中收到了正确的有效负载。问题是模式没有将其删除。任何建议将不胜感激。
这是我的购物车模式:
import React from 'react';
import { connect } from 'react-redux';
import { withStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import Modal from '@material-ui/core/Modal';
import Button from '@material-ui/core/Button';
import SvgIcon from '@material-ui/core/SvgIcon';
import ShoppingCart from '@material-ui/icons/ShoppingCart';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableRow from '@material-ui/core/TableRow';
import { removeFromCart } from '../actions/removeFromCartAction';
import { uniqBy } from 'lodash';
const styles = theme => ({
paper: {
position: 'absolute',
top: '50%',
left: '25%',
// width: theme.spacing.unit * 50,
backgroundColor: theme.palette.background.paper,
boxShadow: theme.shadows[5],
padding: theme.spacing.unit * 4,
},
});
class SimpleModal extends React.Component {
state={
open: false,
}
handleOpen = () => {
this.setState({ open: true });
};
handleClose = () => {
this.setState({ open: false });
};
getUniqueItems = () => {
const initailUniqueItemsArray = uniqBy( this.props.cartItems, 'id')
const uniqueItems = initailUniqueItemsArray.map( ( uniqueItem ) => {
const quantity = this.props.cartItems.reduce( ( accumulator, cartItem ) => {
if ( uniqueItem.id === cartItem.id ) {
accumulator++;
}
return accumulator;
}, 0);
return {
id: uniqueItem.id,
title: uniqueItem.title,
price: uniqueItem.price,
quantity
}
})
return uniqueItems
};
removeFromCartHandler = (cartItem) => {
this.props.onRemove(cartItem)
console.log("RemoveHandler", cartItem)
//console.log("RemoveHandler",id)
}
render() {
const { classes } = this.props;
let items;
if ( this.props.cartItems ) {
//console.log('compare!',this.getUniqueItems(), this.props.cartItems)
const finalUniqueItems = this.getUniqueItems();
items = finalUniqueItems.map( merch => (
<TableRow key={merch.id} >
<TableCell>{merch.title}</TableCell>
<TableCell>{merch.price}</TableCell>
<TableCell>{merch.quantity}</TableCell>
<TableCell>
<Button
variant="outlined"
className={classes.button}
onClick={() => this.removeFromCartHandler(merch)} >
Remove
</Button>
</TableCell>
</TableRow>
))}
let total;
if ( this.props.cartItems ) {
total = (this.props.cartItems).reduce(function (accumulator, item) {
return accumulator + item.price;
}, 0);}
return (
<div>
<Button onClick={this.handleOpen}>
<SvgIcon>
<ShoppingCart />
</SvgIcon>
</Button>
<Modal
aria-labelledby="simple-modal-title"
aria-describedby="simple-modal-description"
open={this.state.open}
onClose={this.handleClose}
>
<div className={classes.paper}>
<Typography variant="h6" id="modal-title">
My Cart
</Typography>
<Table>
<TableBody>
{items}
<TableRow >
<TableCell>Total</TableCell>
<TableCell>{total}</TableCell>
</TableRow>
</TableBody>
</Table>
<SimpleModalWrapped />
</div>
</Modal>
</div>
)
}
}
const mapStateToProps = state => {
console.log("$&",state.card.id)
// console.log("----->",state.data.cardData)
if (!state.data.cardData) {
return {
title: null,
id: null,
img: null,
description: null,
price: null
}
}
const card = state.data.cardData[state.card.id]
return {
card: card,
cartItems: state.shoppingCart.cartItems,
id: state.card.id,
};
}
const mapDispatchToProps = (dispatch) => {
return{
onRemove: (merch) => dispatch(removeFromCart(merch))
}
}
const SimpleModalWrapped = withStyles(styles)(SimpleModal);
export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(SimpleModalWrapped));
这是我的动作
import { ADD_TO_CART } from './types';
export const addToCart = (card) => dispatch => {
console.log('TOTAL', card);
dispatch({
type: ADD_TO_CART,
payload: card
})
}
export const test = {
addToCart: (card) => {
console.log('TOTAL', card);
return {
type: ADD_TO_CART,
payload: card
}
}
}
这是我的减速器
import {ADD_TO_CART} from '../actions/types';
import {REMOVE_FROM_CART} from '../actions/types';
const initialState = {
cards: [],
id: '',
cartItems: [],
}
export default function(state = initialState, action) {
switch(action.type) {
case ADD_TO_CART:
console.log('ADD_reducer');
return {
...state,
cartItems: [...state.cartItems, action.payload],
}
case REMOVE_FROM_CART:
console.log('REMOVE_REDUCER', action.payload, state.cartItems);
// const newCartItems = state.cartItems.filter( item => item !== state.cartItems[action.index] )
return {
...state,
// cartItems: newCartItems
cartItems: state.cartItems.filter(item => item !== action.payload)
// cartItems: state.cartItems.filter(cartItem => action.payload !== cartItem)
// cartItems: [...state.cartItems.splice( action.payload )]
}
default:
return state;
}
}
答案 0 :(得分:0)
代替比较数组,您必须在过滤时比较其ID
case REMOVE_FROM_CART:
console.log('REMOVE_REDUCER', action.payload, state.cartItems);
return {
...state,
cartItems: state.cartItems.filter(item => item.id !== action.payload.id)
}