React/Next.js卡片悬停展示图标数组报错的解决方案咨询

错误原因拆解 #

1. 「元素类型无效，预期字符串/类/函数却得到undefined」：
   通常是因为你在数组中存储的图标不是有效的React组件（比如存了字符串、未正确导入的组件名），导致map渲染时拿到的是undefined。
2. 「对象不能作为React子元素」：
   直接把数组里的图标对象（而非组件实例）当成React子元素渲染，React仅支持字符串、组件实例、数字、null等作为子元素，无法渲染纯对象。

正确实现代码 #

Projects.js（项目数据与父组件）

import Card from './Card';
// 正确导入需要的图标组件
import { FaGithub, FaExternalLinkAlt, FaLinkedin } from 'react-icons/fa';

// 项目数组：icons字段直接存储导入的图标组件（而非字符串/对象）
const projects = [
  {
    id: 1,
    title: "个人博客系统",
    description: "基于React + Node.js搭建的全栈博客平台",
    icons: [FaGithub, FaExternalLinkAlt]
  },
  {
    id: 2,
    title: "电商管理后台",
    description: "使用Ant Design构建的多权限后台管理系统",
    icons: [FaGithub, FaLinkedin]
  }
];

const Projects = () => {
  return (
    <div className="projects-grid">
      {projects.map(project => (
        <Card key={project.id} project={project} />
      ))}
    </div>
  );
};

export default Projects;

Card.js（卡片组件与悬停逻辑）

import { motion } from 'framer-motion';

const Card = ({ project }) => {
  return (
    <motion.div
      className="card-wrapper"
      whileHover={{ scale: 1.03 }}
      transition={{ duration: 0.25 }}
    >
      <div className="card-content">
        <h3>{project.title}</h3>
        <p>{project.description}</p>
      </div>
      
      {/* 悬停时显示图标容器，用Framer Motion控制动画 */}
      <motion.div
        className="icons-group"
        initial={{ opacity: 0, y: 8 }}
        whileHover={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.2 }}
      >
        {/* map图标数组时，实例化组件（<Icon />），而非直接渲染组件对象 */}
        {project.icons.map((Icon, idx) => (
          <Icon 
            key={`${project.id}-${idx}`} 
            className="card-icon" 
            size={20}
          />
        ))}
      </motion.div>
    </motion.div>
  );
};

export default Card;

关键注意事项 #

• 图标必须是合法的React组件：直接在数组中存储导入的图标组件（如FaGithub），而非字符串（如"FaGithub"）或自定义对象。
• 渲染图标时必须实例化组件：用<Icon />的形式渲染，不能直接写Icon（这是组件类/函数对象，不是React元素）。
• 给map元素加唯一key：避免用index作为唯一key（除非图标顺序固定），建议结合项目ID和索引生成唯一标识。
• 样式补充：可以给.card-icon类添加颜色、间距等样式，优化图标显示效果。

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