将图标映射到来自 API 的类别调用 React Typescript 前端

Question

我有一个来自 API 电话的类别列表：

Diagnosis
Client Statements
Damages

我需要在前端为收到的每个类别分配一个图标，我认为最好的方法是使用 switch 语句映射类别。

let icon = '';
const handleIcon = () => {
  categories.map((cat) => {

    switch (cat.categoryName) {
      case 'Diagnosis':
        icon = 'checklist-24';
        break;
      case 'Client Statements':
        icon = 'document-24';
        break;
      case 'Damages':
        icon = 'car-crash-24'
        break;
      default:
        break;
    }
  });
};

我的问题是所有类别最终都成为最后一个图标，因为对于我的地图功能它们最终都是真实的。

categories.map((cat) => {
  <div>{icon}</div>
  <div>{cat.categoryName}</div>
})

如何根据地图中的类别名称分配不同的图标？

谢谢。

Answer 1

这是处理这种情况的正确方法，即当您必须在显示数据之前对数据进行额外操作时：

const cats = [
  { categoryName: 'Diagnosis' },
  { categoryName: 'Client Statements' },
  { categoryName: 'Damages' },
];

export default function App() {

  const [categories, setCategories] = useState(cats);

  const _categories = useMemo(() => {
    return categories.map((cat) => ({
      ...cat,
      icon: getIcon(cat.categoryName),
    }));
  }, [categories]);

  return (
    <div>
      {_categories.map((cat) => (
        <div>
          {cat.categoryName}:{cat.icon}
        </div>
      ))}
    </div>
  );
}

function getIcon(name) {
  switch (name) {
    case 'Diagnosis':
      return 'checklist-24';
    case 'Client Statements':
      return 'document-24';
    case 'Damages':
      return 'car-crash-24';
    default:
      return '';
  }
}

通过这种方式，您正在记忆您的操作，这无论如何都是昂贵的，并且如果类别没有改变，您不希望它在每次重新渲染时发生，并且您使用纯函数 getIcon() 将相关图标附加到您的类别对象。你可以附加任何你想要的，甚至是直接显示的 JSX 组件。

测试一下HERE

将图标映射到来自 API 的类别调用 React Typescript 前端

Map Icons to Categories from API Call React Typescript Frontend

javascript

api

icons

reactjs