假设图标是导入的并且是静态的，也许icons对象可以在组件外部定义，这样即使没有useMemo或useCallback，当组件重新呈现时也不会重新创建它。
访问对象中的图标可能不需要getIcons，因为在输出JSX中，icons[name]可以用花括号{}括起来以呈现图标。
示例（现场演示：stackblitz）：

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';

// 👇 Can be defined here if the icons are imported and static
const icons = {
  PersonIcon: <PersonIcon />,
  ShoppingCartIcon: <ShoppingCartIcon />,
  SecurityIcon: <SecurityIcon />,
  LocalActivityIcon: <LocalActivityIcon />,
};

// 👇 Just an array of the icon names for testing
const iconNames = Object.keys(icons);

export default function App() {
  return (
    <div className="App">
      <h1>Icons</h1>
      <ul>
        {iconNames.map((name, index) => (
          <li key={index}>{icons[name]}</li>
        ))}
      </ul>
    </div>
  );
}

然而，根据用例的不同，也许还可以考虑使用其他方法来显示图标列表，而不是从对象访问它。
下面的例子显示了一个图标列表，如果需要的话，还可以传递MUI属性来设置它的样式（可能对其他库不起作用）。
示例（现场演示：stackblitz）：

// Works for MUI icons but might not for other libraries

const icons = [PersonIcon, ShoppingCartIcon, SecurityIcon, LocalActivityIcon];

export default function App() {
  return (
    <div className="App">
      <h1>Icons</h1>
      <ul>
        {icons.map((Icon, index) => (
          <li key={index}>
            <Icon fontSize="large" color="primary" />
          </li>
        ))}
      </ul>
    </div>
  );
}

另一种可行的方法也可以工作（使用MUI）并接受图标的 prop ，方法是将图标定义为map中的组件：
示例（现场演示：stackblitz）：

// Works for MUI icons but might not for other libraries

const icons = { PersonIcon, ShoppingCartIcon, SecurityIcon, LocalActivityIcon };

const iconNames = Object.keys(icons);

export default function App() {
  return (
    <div className="App">
      <h1>Icons</h1>
      <ul>
        {iconNames.map((icon, index) => {
          const Icon = icons[icon];
          return (
            <li key={index}>
              <Icon fontSize="large" color="primary" />
            </li>
          );
        })}
      </ul>
    </div>
  );
}

1.当这是一个函数时，您将displayIcons作为变量调用。

1. getIcons是函数而不是数组。您应该执行getIcons（icon）
   您的代码可以简化为

import { useCallback, useEffect, 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 = ['PersonIcon','ShoppingCartIcon', 'SecurityIcon', 'LocalActivityIcon']
  
  const getIcons = (icon) => {
    const icons = {
      PersonIcon: <PersonIcon />,
      ShoppingCartIcon: <ShoppingCartIcon />,
      SecurityIcon: <SecurityIcon />,
      LocalActivityIcon: <LocalActivityIcon />
    }
    return icons[icon];
  }

  const displayIcons = useCallback(() => {
    return (
      <ul>{iconNames.map((icon) => { return getIcons(icon) })}</ul>
    )
  },[iconNames])

  return (
    <div className="App">
      <h1>Icons</h1>
      {displayIcons()}
    </div>
  );
}