如何在 react js 中为数组中的项目分配键？

Question

我不明白如何为我的数组元素分配一个键。 我需要为使用我的地图功能旅行的每张卡片分配一个密钥。 我尝试了很多东西，但一无所获。 我期待着您的及时帮助。 谢谢你。

return( 
<Fragment>
<ul>
<Grid container justify="center" alignItems="center">
    { products && products.map((item, index) => {
        return(
        // Comienza la tarjeta.
            <Card className={classes.card}>
              <CardHeader
                avatar={
                  <Avatar aria-label="recipe" src={item.image} className={classes.avatar}/>
                }
                action={
                    obtainRoleUser() === true?
                    <div>
                        <Settings
                            aria-controls="customized-menu"
                            aria-haspopup="true"
                            variant="contained"
                            color="primary"
                            onClick={handleClick}
                        />
                        <StyledMenu
                            id="customized-menu"
                            anchorEl={anchorEl}
                            keepMounted
                            open={Boolean(anchorEl)}
                            onClose={handleClose}
                        >
                            <StyledMenuItem>
                                <ListItemIcon>
                                    <Edit fontSize="small" />
                                </ListItemIcon>
                                <ListItemText primary="Editar Producto" />
                            </StyledMenuItem>
                            <StyledMenuItem>
                                <ListItemIcon>
                                    <Delete fontSize="small" />
                                </ListItemIcon>
                                <ListItemText primary="Borrar Producto" />
                            </StyledMenuItem>
                        </StyledMenu>
                    </div>
                    : 
                    <div/>
                }
                title={item.name + " " + index}
                subheader={"Categoria: " + item.category}
              />
              <CardMedia
                className={classes.media}
                image={item.image}
                title={item.image.title}
              />
              <CardContent>
                <Typography variant="body2" color="textSecondary" component="p">
                  {item.description}
                </Typography>
              </CardContent>
              <CardActions disableSpacing>
            <h5>{item.price + "Bs"}</h5>
              <Grid container justify="center" alignItems="center">
                  <IconButton color="primary" aria-label="add to favorites">
                     <Favorite />
                  </IconButton>
                  <IconButton color="primary" aria-label="add to shopping cart">
                     <AddShoppingCart />
                  </IconButton>
              </Grid>
              </CardActions>
            </Card>
        );
    })
    }
  </Grid>
   </ul>
  </Fragment>
  );
  }

我需要为阵列中的每个目标或产品分配一个键或编号。 我无法解决这个问题，我在键和索引产品数组方面有很多问题。

Answer 1

    return( 
    <Fragment>
    <ul>
    <Grid container justify="center" alignItems="center">
        { products && products.map((item, index) => {
            return(
            // Comienza la tarjeta.
                <Card className={classes.card} key={item.id}>
                  <CardHeader
                    avatar={
                      <Avatar aria-label="recipe" src={item.image} className={classes.avatar}/>
                    }
                    action={
                        obtainRoleUser() === true?
                        <div>
                            <Settings
                                aria-controls="customized-menu"
                                aria-haspopup="true"
                                variant="contained"
                                color="primary"
                                onClick={() => handleClick(item.id)}
                            />
                            <StyledMenu
                                id="customized-menu"
                                anchorEl={anchorEl}
                                keepMounted
                                open={Boolean(anchorEl)}
                                onClose={handleClose}
                            >
                                <StyledMenuItem>
                                    <ListItemIcon>
                                        <Edit fontSize="small" />
                                    </ListItemIcon>
                                    <ListItemText primary="Editar Producto" />
                                </StyledMenuItem>
                                <StyledMenuItem>
                                    <ListItemIcon>
                                        <Delete fontSize="small" />
                                    </ListItemIcon>
                                    <ListItemText primary="Borrar Producto" />
                                </StyledMenuItem>
                            </StyledMenu>
                        </div>
                        : 
                        <div/>
                    }
                    title={item.name + " " + index}
                    subheader={"Categoria: " + item.category}
                  />
                  <CardMedia
                    className={classes.media}
                    image={item.image}
                    title={item.image.title}
                  />
                  <CardContent>
                    <Typography variant="body2" color="textSecondary" component="p">
                      {item.description}
                    </Typography>
                  </CardContent>
                  <CardActions disableSpacing>
                <h5>{item.price + "Bs"}</h5>
                  <Grid container justify="center" alignItems="center">
                      <IconButton color="primary" aria-label="add to favorites">
                         <Favorite />
                      </IconButton>
                      <IconButton color="primary" aria-label="add to shopping cart">
                         <AddShoppingCart />
                      </IconButton>
                  </Grid>
                  </CardActions>
                </Card>
            );
        })
        }
      </Grid>
       </ul>
      </Fragment>
      );
      }

Answer 2

传递一个索引值作为你的第二个参数，并使用它来设置组件的 id：

 return ( <div> {myArr.map((el, idx) => { <MyComponent key={idx} title={el.title} content={el.content} /> })} </div> )