React报错Element type is invalid，如何用map渲染技能数组？

报错原因分析 #

你遇到的Element type is invalid错误，核心是你尝试渲染的不是合法React元素（字符串、组件类/函数），而是普通JavaScript对象，大概率出在这几个环节：

• 数据渲染逻辑错误：技能数组是普通对象，但渲染时直接返回对象而非拆解属性生成React元素
• 导入/导出不匹配：比如数据文件用默认导出，组件里却用命名导入，导致拿到错误的对象
• 误把对象当组件渲染：比如错误写出<skill />这种代码，把字符串属性当成组件名使用

正确实现步骤 #

1. 规范技能数据文件（示例：skillsData.js） #

确保导出结构清晰的对象数组：

// 命名导出方式
export const skills = [
  { id: 1, name: "React", level: "熟练", icon: "🔧" },
  { id: 2, name: "JavaScript", level: "精通", icon: "💻" },
  { id: 3, name: "CSS", level: "熟练", icon: "🎨" }
];

// 或默认导出方式
// export default skills;

2. 正确编写Skills.jsx组件 #

用map遍历数组，返回合法的React元素，同时给每个元素加唯一key：

// 对应命名导出的导入方式
import { skills } from './skillsData';
// 如果是默认导出，改用 import skills from './skillsData';

const Skills = () => {
  return (
    <section className="skills-section">
      <h2>我的技能栈</h2>
      <div className="skills-list">
        {skills.map(skill => (
          <div key={skill.id} className="skill-item">
            <span className="skill-icon">{skill.icon}</span>
            <div className="skill-info">
              <h3>{skill.name}</h3>
              <p>熟练度：{skill.level}</p>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
};

export default Skills;

关键检查点 #

• 匹配导入导出方式：命名导出对应import { xxx }，默认导出对应import xxx，别搞混
• 必须返回React元素：map回调里不能直接返回skill对象，要把对象属性拆解到JSX标签中
• 唯一key属性：用技能对象的唯一标识（比如id）当key，别用数组index，避免数据更新时的渲染异常
• 排查第三方组件：如果用了第三方UI组件，确认组件导入正确（比如别把import { Button } from 'xxx'写成import Button from 'xxx/button'）

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