ReactJS列表项添加分隔符时出现unique key属性报错问题

你遇到的问题根源在于：map返回的每个顶层元素必须有唯一key，而你把key加在了Fragment内部的组件上，却没给Fragment本身加key——React只认列表项顶层元素的key，内部组件的key没用。另外，每次用uuidv4()生成新key会导致组件反复重渲染，反而得不偿失。

修复方案 #

方案1：给Fragment添加key

用React.Fragment（或者<>的完整写法）包裹内容，并把key加在Fragment上，优先使用item自身的唯一标识（比如img.id），没有的话用索引i（如果列表不会重新排序，索引可以临时用）：

function Gallery({ items }) {
  return (
    <section className="image-gallery py-10">
      <div className="card-container grid gap-20">
        {items.map((img, i, arr) => {
          return (
            <React.Fragment key={img.id || i}>
              <ImageCard
                imgSrc={img.src}
                imgAlt="Image"
                link={img.link}
                text={img.text}
                title={img.title}
                reverse={i & 1}
              />
              {i + 1 < arr.length && <Separator />}
            </React.Fragment>
          );
        })}
      </div>
    </section>
  );
}

export default Gallery;

方案2：用容器元素替代Fragment

如果不影响页面样式，可以用一个div包裹每个卡片和分隔符，给这个div加key：

function Gallery({ items }) {
  return (
    <section className="image-gallery py-10">
      <div className="card-container grid gap-20">
        {items.map((img, i, arr) => {
          return (
            <div key={img.id || i}>
              <ImageCard
                imgSrc={img.src}
                imgAlt="Image"
                link={img.link}
                text={img.text}
                title={img.title}
                reverse={i & 1}
              />
              {i + 1 < arr.length && <Separator />}
            </div>
          );
        })}
      </div>
    </section>
  );
}

export default Gallery;

关键注意点 #

• 不要用uuidv4()生成key：每次渲染都会生成新值，React会把所有列表项当成新元素重新渲染，浪费性能。
• 优先使用item的唯一标识：比如后端返回的id，这是React推荐的最佳实践，能保证列表项身份稳定，避免重渲染和排序问题。

内容的提问来源于stack exchange，提问作者mrz