React数组映射多元素报错：Uncaught DOMException: 对象无法克隆

问题原因 #

你直接在skills数组里存储了已实例化的React组件（比如<FaTabletAlt size={20} />），这类JSX元素本质是包含内部引用和状态的React节点对象，React在渲染流程中会尝试克隆这些对象，但组件实例无法被正常克隆，从而抛出Uncaught DOMException: The object could not be cloned错误。

另外原代码中return后直接换行，会触发JavaScript自动分号插入，导致返回undefined，这也是渲染异常的潜在问题。

解决方案 #

方案一：存储组件构造函数，渲染时实例化 #

修改skills数组，只保存组件本身而非实例化的JSX元素：

skills: [
  { name: 'Responsive Gallery', icon: FaTabletAlt },
  { name: '3D Design Tool', icon: FaTools },
  { name: 'Image Slider on loop', icon: TfiLayoutSliderAlt },
  { name: 'User Authentication', icon: GrUserAdmin },
  { name: 'Advanced CSS colour manipulating', icon: IoMdColorPalette },
],

映射时动态渲染组件并传递props：

<article className='outline-2 outline-black outline rounded p-1'>
  <ul className='p-1 grid gap-1'>
    {portfolioItem.skills.map((skill, index) => {
      const Icon = skill.icon;
      return (
        <li className='flex gap-2 items-center' key={index}>
          <h4><Icon size={20} /></h4>
          <h4>{skill.name}</h4>
        </li>
      );
    })}
  </ul>
</article>

方案二：用标识字符串匹配组件（更灵活） #

先定义组件映射表，再用字符串标识存储在数组中：

// 定义组件映射关系
const IconMap = {
  FaTabletAlt,
  FaTools,
  TfiLayoutSliderAlt,
  GrUserAdmin,
  IoMdColorPalette
};

// 修改skills数组
skills: [
  { name: 'Responsive Gallery', icon: 'FaTabletAlt' },
  { name: '3D Design Tool', icon: 'FaTools' },
  { name: 'Image Slider on loop', icon: 'TfiLayoutSliderAlt' },
  { name: 'User Authentication', icon: 'GrUserAdmin' },
  { name: 'Advanced CSS colour manipulating', icon: 'IoMdColorPalette' },
],

渲染时通过映射表获取组件：

<article className='outline-2 outline-black outline rounded p-1'>
  <ul className='p-1 grid gap-1'>
    {portfolioItem.skills.map((skill, index) => {
      const Icon = IconMap[skill.icon];
      return (
        <li className='flex gap-2 items-center' key={index}>
          <h4><Icon size={20} /></h4>
          <h4>{skill.name}</h4>
        </li>
      );
    })}
  </ul>
</article>

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