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

Question

我有一个const对这个问题不了解的具有多个功能的定义，因此我只包括一个相关的经过净化的部分。让我知道是否还应包括其他内容。

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

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

警告：列表中的每个孩子都应该有一个唯一的“关键”道具。

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

我已经尝试键的不同变化，如添加key={index}到hr元件和重新标记所述index密钥作为id用于所述span。我不确定还有什么尝试。任何指导将不胜感激！

Answer 1

您没有将密钥应用于父Fragment。

您可以像使用其他任何元素一样使用<>，只是它不支持键或属性。〜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/>