React中map渲染react-icons时缺失key prop错误的解决求助

问题原因 #

你遇到的报错是因为循环中的图标JSX元素（即logo数组里的<DiReact/>、<SiFirebase/>等）本身没有添加key属性。虽然你给外层的React.Fragment和IconContext.Provider加了key，但ESLint检查的是数组中直接渲染的每个子元素，也就是这些图标组件，它们才是报错的对象。

另外，你当前直接在常量数组中存储JSX元素的方式，不仅会导致key问题，后续从数据库获取数据时也无法直接存储JSX，必须调整结构。

解决方案 #

方案1：重构数据结构（推荐，适配数据库获取场景）

把logo数组改为存储图标的唯一标识（比如组件名称字符串），通过组件映射表动态渲染带key的图标：

1. 调整数据结构：

const realizacjeGallery = [
  {
    id: "ssss",
    title: "ssss", 
    description: <>zzxxx</>,
    photo: zzz,
    logo: ["DiReact", "SiFirebase"] // 存组件名称字符串
  },
  { 
    id: "ss",
    title: "ssss",
    description: <>zzz</>,
    photo: zzz,
    logo: ["DiReact", "SiFirebase"]
  }, 
  {
    id: "zzz",
    title: "sssl",
    description: <>ssss</>,
    photo: muz,
    logo: ["BsWordpress", "DiJqueryLogo"]
  }
];

2. 创建组件映射表：

// 导入所有需要用到的图标组件
import { DiReact, DiJqueryLogo } from 'react-icons/di';
import { SiFirebase } from 'react-icons/si';
import { BsWordpress } from 'react-icons/bs';

const IconComponentMap = {
  DiReact,
  SiFirebase,
  BsWordpress,
  DiJqueryLogo
};

3. 修改渲染代码：

<div style={{ display: "flex", flexDirection: "row" }}>
  {logo?.map((iconKey) => {
    const Icon = IconComponentMap[iconKey];
    // 直接用图标标识作为key，比index更稳定
    return (
      <IconContext.Provider
        key={iconKey}
        value={{ color: "#fff", size: '30px', display: "inline-block" }}
      >
        <Icon />
      </IconContext.Provider>
    );
  })}
</div>

方案2：通过React.cloneElement给现有JSX添加key（临时过渡方案）

如果暂时不想调整数据结构，可以用React.cloneElement给循环中的图标组件手动添加key：

import React from 'react';

// 渲染代码修改为：
<div style={{ display: "flex", flexDirection: "row" }}>
  {logo?.map((iconElement, index) => {
    return (
      <IconContext.Provider
        key={index}
        value={{ color: "#fff", size: '30px', display: "inline-block" }}
      >
        <div>
          {/* 克隆原有图标组件，添加key属性 */}
          {React.cloneElement(iconElement, { key: index })}
        </div>
      </IconContext.Provider>
    );
  })}
</div>

额外优化点 #

• 去掉不必要的React.Fragment，因为IconContext.Provider本身可以作为循环的根元素，无需额外包裹。
• 避免重复使用同一个key（之前你给Fragment和Provider都加了index作为key，这是冗余的），只需要给循环的最外层元素添加唯一key即可。

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