如何通过对象字面量从映射数组渲染React元素及代码排障

你的代码里有几个关键问题导致图标无法显示，下面是修正方案：

错误点及修正： #

1. 函数调用方式错误

   • return里直接写{displayIcons}只是引用了函数本身，并没有执行它，应该改为{displayIcons(iconNames)}
   • displayIcons里的map回调中，getIcons[icon]是错误的调用方式，getIcons是函数，必须用getIcons(icon)来执行

2. 多余的useEffect
   你在useEffect里调用displayIcons完全没必要，React渲染时直接调用函数生成元素即可，而且无依赖的useEffect会导致组件无限重渲染，直接删掉这段代码

3. 可优化的地方
   把图标映射对象用useMemo缓存起来，避免每次调用getIcons都重新创建新对象，提升性能

修正后的完整代码： #

import { useMemo } from "react";
import PersonIcon from "@mui/icons-material/Person"
import ShoppingCartIcon from '@mui/icons-material/ShoppingCart'
import SecurityIcon from '@mui/icons-material/Security'
import LocalActivityIcon from '@mui/icons-material/LocalActivity'

export default function App() {
  const iconNames = useMemo(()=>['PersonIcon','ShoppingCartIcon', 'SecurityIcon', 'LocalActivityIcon'],[]);
  
  // 用useMemo缓存图标映射对象
  const iconMap = useMemo(() => ({
    PersonIcon: <PersonIcon />,
    ShoppingCartIcon: <ShoppingCartIcon />,
    SecurityIcon: <SecurityIcon />,
    LocalActivityIcon: <LocalActivityIcon />
  }), []);

  const getIcons = (icon) => {
    return iconMap[icon];
  }

  const displayIcons = (arr) => {
    return (
      <ul>
        {arr.map((icon, index) => (
          // 注意要给map的元素加key
          <li key={index}>{getIcons(icon)}</li>
        ))}
      </ul>
    );
  }

  return (
    <div className="App">
      <h1>Icons</h1>
      {/* 调用函数并传入数组 */}
      {displayIcons(iconNames)}
    </div>
  );
}

额外补充： #

• 给map生成的<li>元素加上key属性，这是React列表渲染的要求，避免控制台警告
• 如果不需要单独的getIcons函数，也可以直接在map里用iconMap[icon]简化代码：

const displayIcons = (arr) => {
  return (
    <ul>
      {arr.map((icon, index) => (
        <li key={index}>{iconMap[icon]}</li>
      ))}
    </ul>
  );
}

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