React+TypeScript对接Pokeapi时路由与map遍历报错问题求助

报错根因分析 #

Array.prototype.map是仅数组可用的方法，你收到pokemonDetails.map is not a function报错，核心原因就是你在某个地方直接对单只宝可梦的对象数据调用了map方法：

• 全量列表页的pokemon状态初始化为数组，接口返回的results也是数组，所以map调用正常
• 详情页的pokemonDetails是单条宝可梦的对象结构，本身没有map方法，直接遍历自然报错

对应解决方案 #

1. 修正遍历逻辑 #

检查你的Pokemon组件代码，确认所有遍历操作都是针对pokemonDetails下的数组类型属性：

• 正确写法：pokemonDetails.types.map()、pokemonDetails.abilities.map()
• 错误写法：pokemonDetails.map() 找到对应代码直接删改即可

2. 修复现有代码的其他隐患 #

你贴出的Pokemon组件代码还有几个会引发报错的问题需要同步修复：

（1）补充状态初始值 + 类型标注

当前pokemonDetails初始值为undefined，即使有loading判断也可能出现类型报错，修改useState声明：

// 可以先定义宝可梦类型interface，或者直接初始化为空对象做兼容
const [pokemonDetails, setPokemonDetails] = useState<Record<string, any>>({});

（2）修复img标签的alt属性笔误

现有代码写的是alt={pokemon.Detailsname}，属于拼写错误，改成：

<img src={pokemonDetails.image} alt={pokemonDetails.name} />

（3）修正跳转方式

Pokedex组件里用原生a标签跳转会触发整页刷新，替换为react-router-dom的Link组件体验更好：

// 顶部导入组件
import { Link } from 'react-router-dom';
// 替换原有a标签
<Link to={`/pokemon/${index + 1}`}>
  <img src={pokemon.image} alt={pokemon.name} />
  <p>
    {index + 1}.<span>{pokemon.name}</span>
  </p>
</Link>

（4）修复类型包版本不匹配问题

你使用的react-router-dom是v6版本，但对应的类型包@types/react-router-dom是v5版本，会引发很多类型报错，直接卸载v5的类型包即可：

npm uninstall @types/react-router-dom
# react-router-dom v6已经内置了类型定义，不需要额外安装独立类型包

3. 增加容错处理 #

如果担心接口返回异常导致遍历报错，可以给遍历逻辑加可选链操作符做兜底：

{pokemonDetails.types?.map((type: any, index: number) => (
  <p key={index}>{type.type.name}</p>
))}

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