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>
    )

如何在React JS中为数组中的项目分配键？

2 个答案: