列表中的每个孩子都应该有一个唯一的“关键”道具......但它确实有一个关键道具答案

【问题标题】：Each child in a list should have a unique "key" prop... but it does have an a key prop列表中的每个孩子都应该有一个唯一的“关键”道具......但它确实有一个关键道具
【发布时间】：2022-07-21 21:16:06
【问题描述】：

我在 SummaryListItem 组件中遇到关键道具错误的问题。控制台向我显示错误，尽管带下划线的组件确实有一个具有唯一 ID 的 key prop。

{SIXTH_STEP_DATA.map(({ text, id }, index) => (
        <CardWrapper elevation={1} key={id}>
          <SummaryListItem
            info={info}
            key={id}
            handleSetStep={handleSetStep}
            viewContent={viewContent}
            text={text}
            index={index}
            timeIntervalInMiliseconds={timeIntervalInMiliseconds}
          />
        </CardWrapper>
      ))}

我尝试将动态 id 也添加到包装在此组件中的另一个列表（useId 挂钩），但它也没有帮助。

<Card>
      <Divider />
      <StyledCardContent>
        <StyledList disablePadding>
          <StyledListItem disableGutters key={keyId}>
            {viewContent ? (
              <StyledLink variant='h4' onClick={() => handleSetStep(index + 1)}>
                {t(text)}
              </StyledLink>
            ) : (
              <Typography variant='h4'>{t(text)}</Typography>
            )}
          </StyledListItem>
          <ListItemAvatar>
            {viewContent ? (
              <LabelWrapper>{compileContent(summaryInfo)}</LabelWrapper>
            ) : (
              <AvatarWrapperSuccess>
                <Fade in={opacity} timeout={500}>
                  <CheckIcon />
                </Fade>
              </AvatarWrapperSuccess>
            )}
          </ListItemAvatar>
        </StyledList>
      </StyledCardContent>
    </Card>

问题出在哪里？我很确定该组件被赋予了一个带有 id 的正确键。这是这个解决方案第一次不起作用。

编辑：从 useId 钩子为 SummaryListIteam 添加 id 而不是用于 CardWrapper 的 id 也没有帮助：/奇怪。

【问题讨论】：

您确定您的id 是独一无二的吗？
CardWrapper 和 SummaryListItem 都具有相同的 key={id}。如果这不是问题，那么至少它可能会令人困惑。尝试在 id 的前面加上 key={`SummaryListItem-${id}`} 这样的前缀，这样它们就不会发生冲突。
添加到其他 cmets - 仅在该循环中的父/根元素上拥有密钥可能就足够了。孩子们不需要钥匙，除非他们自己处于循环中。这可能会使渲染器感到困惑，因为该列表中的每个元素都有 2 个具有相同键的元素
检查了两个建议。如果我只有在 CardWrapper 上的 prop 密钥，删除孩子上的密钥仍然会出错。尝试从 SummaryListItem 上的 useId() 挂钩添加 id。也没有工作。混乱得要命。

标签： javascript reactjs

【解决方案1】：

Warning: Each child in a list should have a unique "key" prop

您需要使用唯一属性（如索引、id、slug、唯一随机数）。

{list.map((name, index) => (
    <Name key={index}>
      <h2
        key={id}
        >
        {name}
      </h2>
    </Name>
  ))}

【讨论】：