我之前不得不做类似的事情(在网格中显示项目),所以我尝试遵循这种模式。我盯着这个看了一会儿,试图找出问题所在。有什么我没有看到的吗?帮助
错误信息
9 | console.log(localStorage.getItem("shoppingCart")),
10 | <div>
11 | <Grid container spacing={3}>
> 12 | {items.map((item) => (
13 | <Grid item key={item.VinylID} xs={12} sm={4} >
14 | <CartLayout item={item} />
15 | {/* <cartLayout
CartItems.js
const CartItems = ({items}) => {
const classes = useStyles();
return (
console.log(localStorage.getItem("shoppingCart")),
<div>
<Grid container spacing={3}>
{items.map((item) => (
<Grid item key={item.VinylID} xs={12} sm={4} >
<CartLayout item={item} />
{/* <cartLayout
item={lineItem}
onUpdateCartQty={onUpdateCartQty}
onRemoveFromCart={onRemoveFromCart}
/> */}
</Grid>
))}
CartLayout.js
const cartLayout = ({ item }) => {
const classes = useStyles();
return (
<Card className="cart-item">
{/* <CardMedia/> */}
<CardContent className={classes.cardContent}>
<Typography variant="h4"> {item.Name} </Typography>
<Typography variant="h5"> ${item.VinylPrice} </Typography>
</CardContent>
<CardActions className={classes.cartActions}>
<div className={classes.buttons}>
<Button variant="contained" type="button" color="secondary">
Remove
</Button>
</div>
</CardActions>
</Card>
);
};
export default cartLayout;
Cart.js
constructor(props) {
super(props);
this.state = {
currentData: JSON.parse(localStorage.getItem("shoppingCart")).items,
};
}
render() {
return (
<div>
<CartItems currentData={this.state.currentData}/>
</div>
)
}
}
答案 0 :(得分:1)
您需要修复:<CartItems items={this.state.currentData}/>
答案 1 :(得分:1)
您将 currentData={this.state.currentData}
作为道具传递,但随后您正在尝试查找项目 const CartItems = ({items}) => {
您只需将其更改为
items={this.state.currentData}