React项目中如何根据API返回的类型字符串匹配TypeBadge图片

DevOps 小满

2026-7-24

解决宝可梦属性按钮图片匹配问题

1. 修正图片导入方式

你之前的导入只是执行了模块但未获取导出的图片资源，需要用命名空间导入将所有类型图片作为一个对象引入，这样就能通过属性字符串直接访问对应图片：

import * as TypeBadges from '../assets/TypeBadges/index.js';

此时TypeBadges是一个键值对对象，比如TypeBadges.grass就对应Grass.png的资源路径，完全匹配PokeAPI返回的属性名称。

2. 简化属性数组生成（移除不必要的`useEffect`）

原来用useEffect填充数组的方式会导致异步更新问题（初始渲染时数组为空），直接从props中计算属性数组即可：

const typeArray = result?.types?.map(type => type.type.name) || [];

使用可选链操作符?.避免result或result.types为undefined时报错，默认返回空数组。

3. 动态渲染属性图片

不需要手动写固定数量的img标签，直接遍历typeArray生成对应元素，适配1个或2个属性的情况：

完整修正后的组件代码

import React from "react";
import * as TypeBadges from '../assets/TypeBadges/index.js';

// 组件名修改为TypeBadgesComponent，避免和导入的图片对象重名
const TypeBadgesComponent = (props) => {
  const { result } = props; 

  const typeArray = result?.types?.map(type => type.type.name) || [];

  return (
    <div className="type-badges">
      {typeArray.map((type, index) => (
        <img 
          key={index}
          src={TypeBadges[type]} 
          alt={`${type} type badge`}
          className="type-badge" // 可添加类名用于样式控制
        />
      ))}
    </div>
  );
};

export default TypeBadgesComponent;