React列表key属性问题：用index仍触发"Each child in a list should have a unique 'key' prop."报错

你的问题出在把key属性加在了Fragment内部的组件上，而非Fragment本身。React要求列表映射返回的每个直接子元素必须拥有唯一key，而你用的<>是无key的空Fragment，导致React无法识别列表项的唯一性。

修复方法有两种：

方法1：给Fragment添加key #

把空Fragment换成带key的完整Fragment语法：

const selectPfp = pfps?.map((e: string, i: number) => {
  return (
    <React.Fragment key={i}>
      <PfpOption
        active={selectedPFP && selectedPFP === e}
        src={e}
        onClick={() => {
          setSelectedPFP(pfps[i]);
          console.log("clicked");
        }}
      />
    </React.Fragment>
  );
});

方法2：移除多余的Fragment #

如果你的Fragment里只包含一个PfpOption组件，完全可以直接返回PfpOption，不需要额外包裹Fragment：

const selectPfp = pfps?.map((e: string, i: number) => {
  return (
    <PfpOption
      key={i}
      active={selectedPFP && selectedPFP === e}
      src={e}
      onClick={() => {
        setSelectedPFP(pfps[i]);
        console.log("clicked");
      }}
    />
  );
});

额外提醒：虽然用index当key能解决当前报错，但如果列表项有排序、增删操作，可能引发组件状态异常。如果pfp的每个e值是唯一的（比如图片URL唯一），更推荐用e作为key：

key={e}

内容的提问来源于stack exchange，提问作者Joe Ellul-Turner