React TypeScript中map渲染API数据报pokemon.map is not a function错误

页面白屏是控制台抛出TypeError: pokemon.map is not a function导致的，核心错误点有3个：

• PokeApi单个宝可梦详情接口返回的是单个对象结构，不是数组结构，错误将pokemon状态定义为数组类型，还调用仅数组支持的map方法，直接触发类型错误
• useEffect依赖项错误设置为[loading]，会触发无限请求循环：effect执行时修改loading状态，loading变化又触发effect重新执行
• 类型渲染逻辑存在小问题，多属性值会直接拼接无分隔，展示效果异常

1. 修改PokemonPage组件逻辑 #

修正状态类型、useEffect依赖、渲染逻辑，完整修正后代码如下：

import * as C from './styles';

import { useEffect, useState } from 'react';
import { useApi } from '../../Hooks/useApi';
import { useParams } from 'react-router-dom';
import { SinglePokemonTS } from '../../types/SinglePokemon';

import SinglePokemon from '../../Components/SinglePokemon';

const PokemonPage = () => {
  const api = useApi();
  const { name } = useParams();

  const [loading, setLoading] = useState(true);
  // 修正：单个宝可梦是对象不是数组，初始值设为null
  const [pokemon, setPokemon] = useState<SinglePokemonTS | null>(null);

  useEffect(() => {
    if (name) {
      getPokemon(name);
    } 
  // 修正：依赖路由参数name，不要依赖loading避免死循环
  }, [name])

  const getPokemon = async (param: string) => {
    setLoading(true); // 切换宝可梦时重置loading状态
    const pokemonData = await api.getPokemon(param)
    setPokemon(pokemonData);
    setLoading(false);
  }
  
  return (
    <C.PokemonPage>
      {loading && <div>Loading...</div>}
      {!loading && pokemon &&
        {/* 修正：不需要map遍历，直接传单个对象的属性 */}
        <SinglePokemon
          sprites={pokemon.sprites}
          id={pokemon.id}
          name={pokemon.name}
          types={pokemon.types} 
        />
      }
    </C.PokemonPage>
  )
}

export default PokemonPage

2. 修正SinglePokemon组件的类型渲染 #

给多类型的宝可梦添加分隔符，避免类型名直接连在一起：

import * as C from './styles';

import { SinglePokemonTS } from '../../types/SinglePokemon'

const SinglePokemon = ({
    id,
    name, 
    sprites,
    types,
}: SinglePokemonTS) => {
  return (
    <C.PokemonData>
        <img src={sprites.front_default} alt={name} />
        <h1>{name}</h1>
        <p>id: {id}</p>
        {types &&
          {/* 修正：用join添加分隔符 */}
          <p>tipo: <span>{types.map(item => item.type.name).join(' / ')}</span></p>
        }
    </C.PokemonData>
  )
}

export default SinglePokemon

修改完成后页面即可正常加载单个宝可梦的详情信息，不会再出现白屏报错。

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