如何在 React js 中为我的数组中的项目分配一个键？答案

【问题标题】：How can I assign a key to an item in my array in react js?如何在 React js 中为我的数组中的项目分配一个键？
【发布时间】：2019-12-17 11:04:13
【问题描述】：

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

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

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

【问题讨论】：

您已经为地图<div key={index}> 中的顶级元素分配了一个键。如果你的数组中有更独特的东西，那么使用 else 索引就可以了。
我不使用我放的东西，因为我在执行 onClick 事件时没有为整个卡片分配一个数字，我想知道我点击了哪张卡片。
您想在 onClick 上获取特定卡片的索引吗？
是的，我不知道怎么做@AtinSingh
如果您需要创建 onClick 事件或其他特定于节点的侦听器，您将需要使用 refs：reactjs.org/docs/refs-and-the-dom.html（或使用 hooks API：reactjs.org/docs/hooks-reference.html#useref）

标签： javascript reactjs

【解决方案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>
      );
      }

【讨论】：

不推荐使用数组索引。而是使用 item 的内在 id（例如 item.id，如果它存在）
我的意思是key prop，但这也可以。在第三个示例代码下方阅读此reactjs.org/docs/lists-and-keys.html#keys
所以你可以 item.id 对每个数组元素都是唯一的

【解决方案2】：

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

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

【讨论】：

这将引发有关使用数组索引作为键的警告
来自文档“如果项目的顺序可能发生变化，我们不建议对键使用索引。这会对性能产生负面影响，并可能导致组件状态出现问题。”
@JonB 那是如果订单可能会改变。否则，这是一种完全可以接受的做法。
是的，但将其作为示例并不能解释这一点，人们来到 SO 并只是剪切和粘贴代码，这样在某些情况下可能会引入错误，而开发人员不明白为什么。