列表中的每个子元素都应该有一个唯一的“key”属性。

Question

我有一个使用多个函数定义的 const, 它们与问题无关，因此我只包含了一个相关的经过处理的代码段。如果需要更多信息，请告诉我。

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

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

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

由于 hr 元素不需要一个唯一的 key 属性，那么我该如何避免这个错误呢？

我尝试了不同的 key 变化，比如给 hr 元素添加 key={index}，并将 index key 重新标记为 id 给 span 使用。但我不确定还能尝试什么。能否给予指导？非常感谢！

- IAspireToBeGladOS

---

通常这种情况发生在你在循环中创建组件或元素时。如果你使用索引，键将会是0..n。其他循环可能会创建相同的键，或者你可能会共享索引。你可以给索引加上前缀或后缀来使它变得唯一。 - DCTID

@DCTID Keys需要“仅在兄弟姐妹中唯一”。它不与其他数组共享。 - Agney

Answer 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/>

- JavanPoirier

---

我其实已经试过在带有键的 div 中包含该部分了，但不幸的是，您建议的修复方法并没有解决这个错误。虽然如此，我很感激您的评论，对 React.Fragment 有了更深入的了解！ - IAspireToBeGladOS

请发布您的类或组件的其余部分。 - JavanPoirier

我想查看索引值。尝试记录索引并分享结果。 - JavanPoirier

当记录时，索引值按预期递增1 - “0”，“1”，“2”。 - IAspireToBeGladOS

更新了上述内容以包括其余组件！ - IAspireToBeGladOS