React-TS项目中如何将API返回的宝可梦数据拆分渲染为独立组件

单条数据独立渲染本质就是React常规组件拆分思路：

• 父组件只负责全局逻辑：接口请求、全量宝可梦列表状态管理、遍历列表分发数据
• 单独封装单条宝可梦展示组件，只接收单条宝可梦数据作为入参、负责单条内容渲染，后续要加图片、技能、属性值这些自定义内容，直接修改这个单组件即可，不会和父组件逻辑耦合
• 补全TS类型定义，替换代码里的any，避免后续开发出现类型隐患

首先新建独立单卡组件PokemonCard.tsx，所有单条宝可梦的自定义内容都可以在这个组件里扩展：

import React from 'react'

// 对齐PokeAPI返回的列表项结构，定义TS类型
export type PokemonItem = {
  name: string
  url: string
}

export default function PokemonCard({ pokemon }: { pokemon: PokemonItem }) {
  // 直接从返回的url中截取宝可梦id，拼接官方静态资源地址，不需要额外请求就能拿到头像
  const pokemonId = pokemon.url.split('/').filter(Boolean).pop()
  const avatar = `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemonId}.png`

  return (
    <div className="pokemon-card">
      {/* 后续要加的图片、标签、按钮都可以直接写在这里 */}
      <img src={avatar} alt={pokemon.name} width={96} height={96} />
      <p>{pokemon.name}</p>
    </div>
  )
}

再修改原有的容器组件PokeCont.tsx，保留数据拉取逻辑，遍历渲染时直接用独立单卡组件：

import React, { useState, useEffect } from 'react';
import axios from 'axios';
// 引入单卡组件和对应类型
import PokemonCard, { PokemonItem } from './PokemonCard';

export default function PokeCont() {
  // 替换any为明确的数组类型，初始值设为空数组，不需要额外写判空逻辑
  const [pokemons, setPokemons] = useState<PokemonItem[]>([]);

  const fetchPokemonList = () => {
    axios.get('https://pokeapi.co/api/v2/pokemon?limit=6').then((response) => {
      setPokemons(response.data.results);
    });
  };

  useEffect(() => {
    fetchPokemonList();
  }, []);

  return (
    <div className="pokemon-list">
      {pokemons.map((pokemon) => (
        // 传入单条数据给独立组件，key依旧绑定唯一的name字段
        <PokemonCard key={pokemon.name} pokemon={pokemon} />
      ))}
    </div>
  );
}

• 后续要给单个宝可梦加点击事件、详情弹窗、收藏功能，全部逻辑写在PokemonCard组件内部即可，逻辑完全内聚，不会影响父组件的列表逻辑
• 如果需要展示更复杂的宝可梦数据（比如属性、技能、身高体重），可以在PokemonCard组件内拿到url/id后，单独请求详情接口渲染即可

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