React中使用PokeAPI跳转宝可梦详情页出现id undefined如何解决

核心原因1：列表接口返回的原始数据无id字段 #

调用https://pokeapi.co/api/v2/pokemon/接口时，返回的列表条目仅包含name和url两个字段，没有直接返回id属性，你直接使用原始条目渲染列表项，导致pokemon.id为undefined，跳转链接变成/pokemon/undefined，自然无法正常获取详情。

修复方案：处理列表数据提取id #

拿到列表接口返回数据后，对条目做二次处理，从url字段中提取id，同时可以直接拼接官方图片地址，示例代码如下：

// 列表接口请求成功后处理数据
const { data } = await Axios.get('https://pokeapi.co/api/v2/pokemon/')
const processedList = data.results.map(item => {
  // 从url中截取id，url格式为 https://pokeapi.co/api/v2/pokemon/{id}/
  const id = item.url.split('/').filter(Boolean).pop()
  // 拼接官方高清 artwork 图片地址
  const image = `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/${id}.png`
  return {
    ...item,
    id,
    image
  }
})
// 再把处理后的processedList存到store或者组件state中渲染列表

核心原因2：React Router 版本不匹配导致参数获取失败 #

如果你使用的是 React Router v6 版本，旧版props.match.params的写法已经失效，会导致pokemonId为undefined，详情接口请求错误。

修复方案：适配v6版本的参数获取方式 #

详情页改用useParams钩子获取路由参数：

import { useParams } from 'react-router-dom'
// 组件内部代码
const dispatch = useDispatch();
const { id: pokemonId } = useParams(); // 替换原有props.match.params.id的写法
const pokemonDetails = useSelector((state) => state.pokemonDetails);
const { loading, error, pokemon } = pokemonDetails;

useEffect(() => {
  dispatch(detailsPokemon(pokemonId));
}, [dispatch, pokemonId]);

同时确认路由配置正确，v6版本路由写法参考：

import { Routes, Route } from 'react-router-dom'
// 路由配置
<Routes>
  <Route path="/pokemon/:id" element={<PokemonDetail />} />
  {/* 其他路由 */}
</Routes>

其他优化&避坑点 #

1. 列表项跳转建议用React Router的Link组件代替原生a标签，避免页面整页刷新：

import { Link } from 'react-router-dom'
// 替换原有a标签
<Link to={`/pokemon/${pokemon.id}`}>
  <img className="medium" src={pokemon.image} alt={pokemon.name} />
</Link>

2. 详情页渲染前添加loading判断，避免空数据报错：

// 详情页组件return前先判断状态
if(loading) return <div>加载中...</div>
if(error) return <div>加载失败：{error}</div>
// 后续再渲染宝可梦详情内容

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