通过MAP（反应TypeScript）从辅助组件中的API返回信息的错误

Question

我正在尝试返回带有Pokeapi信息的页面，但是它只是在没有信息的情况下返回白屏。我通过API进行了管理，以返回所有Pokemons，但是我正在尝试为每个选择的口袋妖怪创建一个包含信息的页面。

pokemonpage文件夹

 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);
  const [pokemon, setPokemon] = useState<SinglePokemonTS[]>([]);

  useEffect(() => {
    if (name) {
      getPokemon(name);
      console.log(pokemon)
    } 
  }, [loading])

  const getPokemon = async (param: string) => {
    const pokemon = await api.getPokemon(param)
    setPokemon(pokemon)
    setLoading(false);
  }
  
  return (
    <C.PokemonPage>
      {loading &&
        <div>Loading...</div>
      }
      {!loading &&
        pokemon.map((item) => (
          <SinglePokemon
            sprites={item.sprites}
            id={item.id}
            name={item.name}
            types={item.types} 
          />
        ))
      }
    </C.PokemonPage>
  )
}

export default PokemonPage

单pokemon组件：

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="" />
        <h1>{name}</h1>
        <p>id: {id}</p>
        {types &&
          <p>tipo: <span>{types.map(item => item.type.name)}</span></p>
        }
    </C.PokemonData>
  )
}

export default SinglePokemon

singlepokemon.ts类型：

export interface SinglePokemonTS {
    id: number;
    name: string;
    sprites: {
        front_default: string;
    };
    types: {
        type: {
            name: string;
        }
    } []
}

控制台错误：

index.tsx:33 Uncaught TypeError: pokemon.map is not a function
    at PokemonPage (index.tsx:33:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at updateFunctionComponent (react-dom.development.js:19588:1)
    at beginWork (react-dom.development.js:21601:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27451:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
    at workLoopSync (react-dom.development.js:26466:1)

react-dom.development.js:18687 The above error occurred in the <PokemonPage> component:

    at PokemonPage (http://localhost:3000/main.f4037b6ee75101fad614.hot-update.js:198:66)
    at MainRoutes (http://localhost:3000/static/js/bundle.js:1377:69)
    at App
    at Router (http://localhost:3000/static/js/bundle.js:44818:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:43627:5)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

Answer 1

您正在将口袋妖怪列表设置为从API调用中获得的响应。我看不到响应