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

【问题标题】：Each child in a list should have a unique "key" prop列表中的每个孩子都应该有一个唯一的“关键”道具
【发布时间】：2019-08-21 13:31:41
【问题描述】：

我有一个const 定义了多个与问题无关的函数，所以我只包括一个相关的净化段。让我知道我是否应该包含更多内容。

      return (
        <React.Fragment key={index}>
          <hr className={hrClasses} />
          <span className={spanClasses}>
            {isTrue ? 'x' : index + 1}
          </span>
        </React.Fragment>
      );
    })}
  </div>
);

在浏览器中，我看到了警告：

警告：列表中的每个孩子都应该有一个唯一的“key”属性。

由于 hr 元素不需要唯一的 key 道具，我该如何解决这个错误？

我尝试了不同的键变体，例如将key={index} 添加到hr 元素并将index 键重新标记为id 的span。我不确定还能尝试什么。任何指导将不胜感激！

【问题讨论】：

这通常发生在您在循环中创建组件或元素时。如果您使用索引，则键将为 0..n。其他循环可以创建相同的键，或者您可以共享索引。您可以给索引一个前缀或后缀以使其唯一。
@DCTID 密钥必须是 unique within siblings only。它不与其他数组共享它

标签： html css reactjs jsx

【解决方案1】：

您没有将密钥应用于父片段。

您可以像使用任何其他元素一样使用，但它不支持键或属性。 ~https://reactjs.org/docs/fragments.html#short-syntax

您正在使用不支持键的的简短语法。使用：

<React.Fragment key={index}>
      <hr className={styles.hr} />
      <span className={styles.span}>
        {isValidated ? 'x' : index + 1}
      </span>
 <React.Fragment/>

【讨论】：

我实际上已经尝试使用密钥将该部分包含在一个 div 中，不幸的是，您建议的修复并没有修复看到的错误。我很欣赏你的评论，很高兴知道React.Fragment！
请发布您的课程或组件的其余部分。
我想查看索引值。尝试记录索引并分享结果。
记录时的索引值按预期递增 1 - "0"、"1"、"2"
更新了上面的上下文以包含组件的其余部分！