Javascript TypeError:无法读取属性';地图';reactJS上未定义的

Javascript TypeError:无法读取属性';地图';reactJS上未定义的,javascript,reactjs,Javascript,Reactjs,我以前必须做类似的事情(在网格中显示项目),所以我尝试遵循这种模式。我已经盯着这个看了一段时间,试图找出问题所在。有什么我没看见的吗?帮助 错误消息 9 | console.log(localStorage.getItem("shoppingCart")), 10 | <div> 11 | <Grid container spacing={3}> > 12 | {items.map((item) => ( 13

我以前必须做类似的事情(在网格中显示项目),所以我尝试遵循这种模式。我已经盯着这个看了一段时间,试图找出问题所在。有什么我没看见的吗?帮助

错误消息

   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
9 | console.log(localStorage.getItem(“shoppingCart”)),
10 | 
11 |   
>12 |{items.map((item)=>(
13 |       
14 |           
15 |         {/*  {
const classes=useStyles();
返回(
console.log(localStorage.getItem(“shoppingCart”),
{items.map((item)=>(
{/*  */}
))}
CartLayout.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>
        ))}
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;
  constructor(props) {
    super(props);
    this.state = {
      currentData: JSON.parse(localStorage.getItem("shoppingCart")).items,
    };
  }

  render() {
    return (
      <div>
        <CartItems currentData={this.state.currentData}/>
      </div>
    )
  }
}
const cartLayout=({item})=>{
const classes=useStyles();
返回(
{/*  */}
{item.Name}
${item.VinylPrice}
去除
);
};
导出默认布局;
Cart.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>
        ))}
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;
  constructor(props) {
    super(props);
    this.state = {
      currentData: JSON.parse(localStorage.getItem("shoppingCart")).items,
    };
  }

  render() {
    return (
      <div>
        <CartItems currentData={this.state.currentData}/>
      </div>
    )
  }
}
构造函数(道具){
超级(道具);
此.state={
currentData:JSON.parse(localStorage.getItem(“shoppingCart”)).items,
};
}
render(){
返回(
)
}
}
您需要修复:
您需要修复:

问题 您正在将
currentData={this.state.currentData}
作为一个道具传递,但是您正在尝试查找items
const-carttitems=({items})=>{

解决方案 你只要把它改成
items={this.state.currentData}

问题 您正在将
currentData={this.state.currentData}
作为一个道具传递,但是您正在尝试查找items
const-carttitems=({items})=>{

解决方案 你只要把它改成
items={this.state.currentData}

谢谢!!我不敢相信我忽略了这一点。你是救命恩人谢谢!!我不敢相信我忽略了这一点。你是救命恩人