Блог

Главная - Вопросы по программированию - Ошибка React array.map

Ошибка React array.map

#javascript #reactjs #react-hooks

#javascript #reactjs #реагирующие крючки

Вопрос:

Привет, у меня проблема с array.map в react

 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

Если есть какие-либо вопросы, пишите

Ответ №1:

Добавьте фигурные скобки для чтения как 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>
    });
  }
  </>
);

}

Ответ №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>
        });
      </>
    );
}