React中.map()渲染PokeAPI列表时如何拆分生成独立组件

算力阿峰

2026-8-29

问题背景

需要基于现有React+TS代码，把PokeAPI返回的宝可梦列表渲染逻辑拆分为独立组件，替代当前直接在map遍历中写标签的写法，方便后续扩展完整宝可梦数据展示能力。
当前核心实现代码如下：

import React,{useState} from 'react'
import axios from 'axios'
export default function PokeCont() {

  const [pokemons, setPokemons] = useState<any> ()
  
  const onClick = () => {
    axios.get("https://pokeapi.co/api/v2/pokemon?limit=6").then((response)=>{
      setPokemons(response.data.results)
      console.log(response.data.results)
    })
  }
   
  return (
    <div className="App">
      <button onClick={onClick}>Get pokemon</button>
     {pokemons && pokemons.map((pokemon : any) => (
       <div key={pokemon.name}>
         <p>{pokemon.name}</p>
       </div>
     ))}
    </div>
  );
}

拆分实现思路

整个拆分核心是做逻辑分层，父组件管数据和整体流程，子组件管单个条目渲染，分三步实现即可：

第一步：新建独立的单宝可梦渲染组件
新建单独的PokemonItem组件文件，这个组件只负责单个宝可梦内容的渲染，通过props接收父组件传入的宝可梦数据，后续要加宝可梦图片、属性、技能、点击交互这些内容，全部在这个组件里修改，不需要动父组件逻辑。
组件基础写法参考：

// PokemonItem.tsx
import React from 'react'

// 定义props类型，后续扩展字段直接在这里补充即可，比用any更不容易出低级错误
type PokemonItemProps = {
  name: string
}

export default function PokemonItem({ name }: PokemonItemProps) {
  return (
    <div className="pokemon-card">
      <p>{name}</p>
      {/* 后续扩展的图片、属性、操作按钮等全部写在这 */}
    </div>
  )
}

第二步：改造父组件的遍历渲染逻辑
父组件PokeCont只保留数据拉取、列表状态管理、按钮交互的逻辑，在文件顶部引入刚才写的PokemonItem组件，替换掉原来map里直接写的div、p标签。注意key属性必须加在循环渲染的最外层组件上，不要写在子组件内部的标签上。
改造后的父组件渲染部分代码：

// 顶部引入子组件
import PokemonItem from './PokemonItem'

// 其余状态、请求逻辑保持不变，修改return里的遍历部分
return (
  <div className="App">
    <button onClick={onClick}>Get pokemon</button>
    {pokemons && pokemons.map((pokemon : any) => (
      <PokemonItem
        key={pokemon.name}
        name={pokemon.name}
        // 后续新增宝可梦字段直接在这里传参即可，比如url={pokemon.url}
      />
    ))}
  </div>
)

第三步：按需扩展即可
后续要加宝可梦的完整数据，要么在点击按钮的时候拉取全量数据传进去，要么在PokemonItem组件里根据拿到的宝可梦url单独发请求拉取详情，两种方式都可以，根据实际需求选择就行。

这么拆分的收益很直接：

逻辑解耦，父组件管全局数据，子组件管单条展示，改样式改交互不用翻大段冗余代码
组件可复用，其他页面要展示宝可梦卡片的时候，直接引入PokemonItem传对应数据就能用，不用重复写结构
后续扩展不会乱，哪怕宝可梦卡片加十几二十个展示字段，代码也不会堆在父组件里难以维护

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