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键重新标记为{{1 }}。我不确定还有什么尝试。任何指导将不胜感激！

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

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

1 个答案: