React组件状态修改问题：Pokemon API类型切换不生效

AI 小北

2026-8-25

问题分析与解决

你的核心问题出在useEffect的依赖配置上：

你当前的useEffect依赖数组是[]，这表示它只会在组件首次挂载时执行一次。
虽然handleSelect能正确更新value状态，但因为useEffect没有监听value的变化，所以不会重新触发数据请求，导致新的value无法传递给getPokemonTypes函数。

修复步骤

更新useEffect的依赖数组
把value添加到useEffect的依赖数组中，这样每当value变化时，useEffect就会重新执行，调用fetchData获取对应类型的宝可梦数据：

useEffect(() => {
    async function fetchData() {
        const pokemonTypesCard = await getPokemonTypes(value)
        const pokemonIdText = pokemonTypesCard.pokemon.map((item) => {
            return item.pokemon.name
        })
        const data = pokemonIdText.map(async (pokemonId) => {
            return await getPokemonInfo(pokemonId)
        })
        const pokemonIdNumber = await Promise.all(data)
        setPokemonIdNumber(pokemonIdNumber)
        setPokemonTypesCard(pokemonTypesCard)
    }
    fetchData()
}, [value]) // 此处添加value作为依赖

优化空数据判断逻辑
你的初始pokemonIdNumber是[]（空数组），!pokemonIdNumber永远为false（空数组属于真值），可以修改为判断数组长度：

{pokemonIdNumber.length === 0 ? '' : pokemonIdNumber.map((item, index) =>
    <li key={index}>
        <Link to={`/pokemon/${item.id}`}>
            <img
                src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${item.id}.png`}
                alt={item.name}
            />
        </Link>
        <p>{item.name}</p>
    </li>
)}