javascript - TypeError:无法读取 reactJS 上未定义的属性“地图”
问题描述
我之前必须做类似的事情(在网格中显示项目),所以我试图遵循这种模式。我盯着这个看了一段时间,试图找出问题所在。有什么我没看到的吗?帮助
错误信息
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;
购物车.js
constructor(props) {
super(props);
this.state = {
currentData: JSON.parse(localStorage.getItem("shoppingCart")).items,
};
}
render() {
return (
<div>
<CartItems currentData={this.state.currentData}/>
</div>
)
}
}
解决方案
你需要修复:<CartItems items={this.state.currentData}/>
推荐阅读
- mysql - MySQL 时间戳的平均值,现在以秒为单位
- heroku-cli - 如何在 MacOS 上不使用 HomeBrew 安装 Heroku CLI
- javascript - 每秒更改文本颜色
- php - 在 WooCommerce 结帐中为特定选择的运输方式添加正文类
- swiftui - 在视图控制器中创建 Publishable 属性,将其传递给 SwiftUI 视图并监听视图控制器内部的更改?
- javascript - 如何将所有 javascript 输出保存到 txt 文件中以备后用?
- url - 更改 Jekyll 站点 baseurl 而不破坏现有帖子的链接
- python - 将数据放在规模上(并减少最高数字的力量)
- html - 如何为手机上的同一部分设置不同的图像背景
- scala - 在集合中找不到值“versionReconciliation”