React项目中如何将第三方API返回平台数据动态映射为react-icons图标

报错原因 #

你传入SearchRes组件的plat prop是game.parent_platforms数组，数组本身没有platform属性，直接读取plat.platform.id自然会触发undefined读属性的报错。

实现方案 #

按下面的步骤修改即可实现动态映射平台图标：

1. 先在SearchRes组件内定义图标映射表，注意存组件引用而非实例，性能更优
2. 遍历plat数组，对每个平台项匹配对应图标渲染
3. 增加可选链操作符做边界容错，避免空值报错

完整代码示例

// 先导入需要的图标
import { FaWindows, FaPlaystation, FaXbox, FaAppStoreIos, FaApple, FaLinux, FaAndroid } from 'react-icons/fa'
import { SiNintendoswitch } from 'react-icons/si'

const SearchRes = ({ plat, /* 其他props */ }) => {
  // 定义图标映射表，key对应平台id，value存图标组件
  const iconMap = {
    1: FaWindows,
    2: FaPlaystation,
    3: FaXbox,
    4: FaAppStoreIos,
    5: FaApple,
    6: FaLinux,
    7: SiNintendoswitch,
    8: FaAndroid
  }

  return (
    <div>
      {/* 其他卡片内容 */}
      <div className="platform-icons">
        {/* 遍历plat数组，加可选链容错，plat为undefined/空数组时不会报错 */}
        {plat?.map(item => {
          const Icon = iconMap[item.platform.id]
          // 匹配到对应图标才渲染，未匹配的id直接跳过
          return Icon ? <Icon key={item.platform.id} /> : null
        })}
      </div>
    </div>
  )
}

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