React渲染对象数组内react-icons报错求助

常见错误原因及解决方案 #

1. 图标导入方式错误 #

react-icons的所有图标均为命名导出，需严格匹配导入语法：

// 正确写法
import { FaUser, FaShoppingCart } from 'react-icons/fa';
import { MdHome, MdSettings } from 'react-icons/md';

// 错误写法（会导致图标组件为undefined）
import FaUser from 'react-icons/fa';

2. 对象数组中存储的不是组件引用 #

若数组内存储的是图标名称字符串（如'FaUser'）而非组件本身，React无法识别为有效组件：

// 错误写法
const navItems = [
  { id: 1, icon: 'FaUser', title: '个人中心' }
];

// 正确写法
const navItems = [
  { id: 1, icon: FaUser, title: '个人中心' },
  { id: 2, icon: MdHome, title: '首页' }
];

3. 渲染组件时的语法错误 #

React组件必须以大写字母开头，且需以标签形式渲染（不能直接输出变量）：

// 错误写法（直接输出组件变量，React会当作普通值处理）
{navItems.map(item => <div>{item.icon}</div>)}

// 正确写法1：直接以标签形式渲染
{navItems.map(item => (
  <div key={item.id}>
    <item.icon size={24} />
    <span>{item.title}</span>
  </div>
))}

// 正确写法2：使用React.createElement
import React from 'react';

{navItems.map(item => (
  <div key={item.id}>
    {React.createElement(item.icon, { size: 24, color: '#333' })}
    <span>{item.title}</span>
  </div>
))}

4. 自定义图标组件导出/导入不匹配 #

若封装了自定义图标组件，需确保导出与导入方式一致：

// 自定义图标组件（MyIcon.jsx）
import { FaUser } from 'react-icons/fa';

// 默认导出
export default function MyIcon() {
  return <FaUser />;
}

// 对应导入方式
import MyIcon from './MyIcon';

// 若为命名导出
export const MyIcon = () => <FaUser />;
// 对应导入方式
import { MyIcon } from './MyIcon';

错误日志对应排查 #

控制台常见错误提示及对应原因：

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

• 优先检查图标导入是否正确，或数组中存储的组件是否为undefined

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: string.

• 检查数组中是否存储了图标名称字符串而非组件引用

快速验证步骤 #

1. 单独渲染单个图标组件，确认导入和渲染正常：

function TestIcon() {
  return <FaUser />;
}

若该组件能正常显示，说明导入无问题，问题出在数组存储或渲染逻辑上。

2. 打印数组中的图标组件，确认其类型为函数/类：

console.log(navItems[0].icon); // 应输出函数，而非字符串或undefined

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