Pokeapi pokemonDetails.map 不是函数 & 已修复 [模块 '"react-router-dom"' 没有导出成员 'RouteComponentP

Posted 2023-03-27

【中文标题】Pokeapi pokemonDetails.map 不是函数 & 已修复 [模块 \'"react-router-dom"\' 没有导出成员 \'RouteComponentProps\' ]

【英文标题】：Pokeapi pokemonDetails.map is not a function & FIXED [Module '"react-router-dom"' has no exported member 'RouteComponentProps' ]Pokeapi pokemonDetails.map 不是函数 & 已修复 [模块 '"react-router-dom"' 没有导出成员 'RouteComponentProps' ]

【发布时间】：2022-01-12 13:51:58

【问题描述】：

我正在使用 React 和 TypeScript 处理 Pokeapi。在获取数据以在一侧显示所有口袋妖怪时，一切正常。但是当点击一个特定的口袋妖怪来显示他们的详细信息时，我得到了 2 个错误。

更新：已修复！ #1 错误：我不能使用 match 因为模块 '"react-router-dom"' 没有导出的成员 'RouteComponentProps'。几个月前我在一个 ReactJS 项目中使用了它，一切正常。

#2 错误：当映射抛出每个口袋妖怪时，会出现错误 pokemonDetails.map is not a function，而在另一个组件中使用地图（在一个页面上显示所有口袋妖怪），一切正常。

这是我使用路由器的 App.js 组件：

import Pokedex from './Pokedex';
import Pokemon from './Pokemon';
import  Route, Routes  from 'react-router-dom';

function App() 
  return (
    <Routes>
      <Route path='/' element=<Pokedex /> />
      <Route path='/pokemon/:id' element=<Pokemon /> />
    </Routes>
  );


export default App;

这是我的 Pokedex 组件（在一侧显示所有口袋妖怪）：

import  useEffect, useState  from 'react';
import Container from 'react-bootstrap/Container';
import Col from 'react-bootstrap/Col';
import Row from 'react-bootstrap/Row';

const Pokedex = () => 
  const [pokemon, setPokemon] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => 
    getPokedex();
  , []);

  const getPokedex = async () => 
    try 
      const res = await fetch('https://pokeapi.co/api/v2/pokemon?limit=151');
      const  results  = await res.json();
      const pokedex = results.map((pokemon: any, index: number) => 
        const paddedId = ('00' + (index + 1)).slice(-3);
        const image = `https://assets.pokemon.com/assets/cms2/img/pokedex/detail/$paddedId.png`;
        return  ...pokemon, image ;
      );
      setPokemon(pokedex);
      setLoading(false);
     catch (err) 
      console.error(err);
    
  ;

  return (
    <Container>
      loading ? (
        'Fetching Pokemon...'
      ) : (
        <Row>
          pokemon.map((pokemon: any, index: number) => (
            <Col key=index xs=1 sm=1 md=1 lg=1 xl=1>
              <a href=`/pokemon/$index + 1`>
                <img src=pokemon.image alt=pokemon.name />
                <p>
                  index + 1.<span>pokemon.name</span>
                </p>
              </a>
            </Col>
          ))
        </Row>
      )
    </Container>
  );
;

export default Pokedex;

更新：这是 Pokemon 组件（用于显示每个 Pokemon 的详细信息）：

import  useEffect, useState  from 'react';
import Container from 'react-bootstrap/Container';
import  useParams  from 'react-router-dom';

const Pokemon = () => 
  const [pokemonDetails, setPokemonDetails] = useState();
  const [loading, setLoading] = useState(true);

  const  id  = useParams();

  useEffect(() => 
    getPokemon(id);
  , [id]);

  const getPokemon = async (id: string | undefined) => 
    try 
      const res = await fetch(`https://pokeapi.co/api/v2/pokemon/$id`);
      const pokemon = await res.json();
      const paddedId = ('00' + id).slice(-3);
      pokemon.image = `https://assets.pokemon.com/assets/cms2/img/pokedex/detail/$paddedId.png`;
      setPokemonDetails(pokemon);
      setLoading(false);
     catch (err) 
      console.error(err);
    
  ;

  return (
    <Container>
      <h1>Pokemon</h1>
      loading ? (
        'Fetching Pokemon...'
      ) : (
        <div>
          <h2>pokemonDetails.name</h2>
          <h2>pokemonDetails.id</h2>
          <img src=pokemonDetails.image alt=pokemon.Detailsname />
          <p>
            pokemonDetails.types.map((type: any, index: number) => (
              <p key=index>type.type.name</p>
            ))
          </p>
        </div>
      )
    </Container>
  );
;

export default Pokemon;

带有“id”的 API 应该返回这个 https://pokeapi.co/api/v2/pokemon/1

这是我的 package.json 文件，以备不时之需：

  "name": "pokemon",
  "version": "0.1.0",
  "private": true,
  "dependencies": 
    "@testing-library/jest-dom": "^5.16.0",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "@types/jest": "^27.0.3",
    "@types/node": "^16.11.11",
    "@types/react": "^17.0.37",
    "@types/react-dom": "^17.0.11",
    "@types/react-router-dom": "^5.3.2",
    "axios": "^0.24.0",
    "bootstrap": "^5.1.3",
    "react": "^17.0.2",
    "react-bootstrap": "^2.0.3",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.0.2",
    "react-scripts": "4.0.3",
    "typescript": "^4.5.2",
    "web-vitals": "^1.1.2"
  ,
  "scripts": 
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  ,
  "eslintConfig": 
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  ,
  "browserslist": 
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  

【问题讨论】：

你能展示你的 App.js 吗？

您能否显示 API 返回的数据是什么？

@TanishqVyas App.js 是我在这里添加的第一个代码。

@TanishqVyas 感谢您指出 API 的返回值。它是一个对象，所以这里没有办法使用 map 函数。我更新了 pokemon 组件，现在有一个不同的错误：ReferenceError: pokemon is not defined。此外，当我将 useState() 设置为对象时，会出现错误 Typeerror Property 'name' does not exist on type ''。

Result of API@TanishqVyas

【参考方案1】：

在 react-router-dom v6 中不再有 route props（即没有 history、location 或 match 道具），就像 RRDv5 中的 Route 组件一样。在 v6 中，您应该使用 React 挂钩来访问匹配路由的匹配参数。

使用 Link 组件而不是原始锚 (<a />) 标记来链接到特定的口袋妖怪页面。

import  Link  from 'react-router-dom';

...

pokemon.map((pokemon: any, index: number) => (
  <Col key=index xs=1 sm=1 md=1 lg=1 xl=1>
    <Link to=`/pokemon/$index + 1`>
      <img src=pokemon.image alt=pokemon.name />
      <p>
        index + 1.<span>pokemon.name</span>
      </p>
    </Link>
  </Col>
))

使用useParams钩子从路径中获取匹配的id匹配参数。

import  useParams  from 'react-router-dom';

const Pokemon = () => 
  const [pokemonDetails, setPokemonDetails] = useState([]);
  const [loading, setLoading] = useState(true);

  const  id  = useParams();

  useEffect(() => 
    getPokemon(id);
  , [id]);

  const getPokemon = async (id: number) => 
    try 
      const res = await fetch(`https://pokeapi.co/api/v2/pokemon/$id`);
      const pokemon = await res.json();
      const paddedId = ('00' + id).slice(-3);
      pokemon.image = `https://assets.pokemon.com/assets/cms2/img/pokedex/detail/$paddedId.png`;
      setPokemonDetails(pokemon);
      setLoading(false);
     catch (err) 
      console.error(err);
    
  ;

  return (
    ...
  );
;

【讨论】：

非常感谢您对我过去 2 个月错过的内容的快速解释（新的 React 文档，新的路由器文档）；我真的很感激。

【参考方案2】：

至于打字稿，我必须将状态的类型声明为any，现在获取工作正常。

const [pokemonDetails, setPokemonDetails] = useState<any>([]);