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

Question

我正在使用 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"
    ]
  }
}

Answer 1

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

1. 使用 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>
   ))}
   

2. 使用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 (
       ...
     );
   };
   

Answer 2

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

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