反应 array.map 错误

Question

嗨，我在反应中遇到 array.map 问题

export default function CardMakerForCompanies() {
const data = [{img: 'https://play-lh.googleusercontent.com/YFpMBVjnTFQ9D7ln9jOPDxCwTf_AUPgNU0Tz8uskVP-0Esj_5jqBDpqcPm0LwDpcLA', name: 'Company Name(getting from db)', desc: 'Company Description(getting from db, Max chars. 50) \\\ Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum'}];

const classes = useStyles();
 
return(
      <>
      data.map((e) => {
          <Card className={classes.root}>
            <CardActionArea>
              <CardMedia
                className={classes.media}
                image={e.img}
                title="logo"
              />
              <CardContent>
                <Typography gutterBottom variant="h5" component="h2">
                 {e.name}
                </Typography>
                <Typography variant="body2" color="textSecondary" component="p">
                 {e.desc}
                </Typography>
              </CardContent>
            </CardActionArea>
            <CardActions>
              <Button size="small" color="primary">
                More Info
              </Button>
            </CardActions>
          </Card>
        });
      </>
    );
}

我希望它返回带有名称、描述和图像的卡片，但它会出现一些错误

  Line 35:26:  'e' is not defined  no-undef
  Line 40:21:  'e' is not defined  no-undef
  Line 43:21:  'e' is not defined  no-undef

如果有任何问题写

Answer 1

添加 Curley 大括号以读取为 js 而不是 html。

export default function CardMakerForCompanies() {
const data = [{img: 'https://play- 
lh.googleusercontent.com/YFpMBVjnTFQ9D7ln9jOPDxCwTf_AUPgNU0Tz8uskVP- 
0Esj_5jqBDpqcPm0LwDpcLA', name: 'Company Name(getting from db)', desc: 
'Company Description(getting from db, Max chars. 50) \\\ Lorem Ipsum Lorem 
 Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum'}];

const classes = useStyles();

return(
  <>
  {data.map((e) => {
      return <Card className={classes.root}>
        <CardActionArea>
          <CardMedia
            className={classes.media}
            image={e.img}
            title="logo"
          />
          <CardContent>
            <Typography gutterBottom variant="h5" component="h2">
             {e.name}
            </Typography>
            <Typography variant="body2" color="textSecondary" component="p">
             {e.desc}
            </Typography>
          </CardContent>
        </CardActionArea>
        <CardActions>
          <Button size="small" color="primary">
            More Info
          </Button>
        </CardActions>
      </Card>
    });
  }
  </>
);

}

Answer 2

确保在地图中的Card jsx 之前返回：

return(
      <>
      data.map((e) => {
          return <Card className={classes.root}>
            <CardActionArea>
              <CardMedia
                className={classes.media}
                image={e.img}
                title="logo"
              />
              <CardContent>
                <Typography gutterBottom variant="h5" component="h2">
                 {e.name}
                </Typography>
                <Typography variant="body2" color="textSecondary" component="p">
                 {e.desc}
                </Typography>
              </CardContent>
            </CardActionArea>
            <CardActions>
              <Button size="small" color="primary">
                More Info
              </Button>
            </CardActions>
          </Card>
        });
      </>
    );
}