React 路由器 - 为详细信息页面正确设置 useParams

Question

这可能是一个小错误，但我真的不知道为什么它不起作用。

我有 react 应用程序，当它初始化时，它会从 Pokéapi 获取数据并将其设置为 redux 状态。

在获取此数据时，会显示<Intro /> 组件。如果下载结束，页面会重定向到/home，listPokemons组件会渲染一些这样的结果。

主视图 - listPokemons

 result =  allPokemons.slice(0,9).map( (pokemon,i) => 

 <Link to={`/pokemon/${pokemon.id}`}>
    <Pokemon 
        key={i} 
        name={pokemon.name} 
        image={pokemon.image}
        type={pokemon.type}
        abilities={pokemon.abilities}
     />
 </Link>

所以点击一些渲染的口袋妖怪后，位置将变为口袋妖怪的/pokemon/id..这部分正在工作。

在我的 app.js 中

<Router>
   {isLoading ? <Redirect exact to="/intro" /> : <Redirect exact from="/" to="/home" />}

   <Route exact path="/intro">
         <IntroView />
   </Route>

   <Route exact path="/home">
        <MainView />
   </Route>

   <Route path="/pokemon/:id">
       <PokemonOverview />
   </Route>
</Router>

所以如果我理解正确，如果点击了其中一个口袋妖怪，<PokemonOverview /> 将呈现并应该显示该点击的口袋妖怪的数据。但它不起作用。

PokemonOverview 组件

import React from 'react';
import {useParams} from "react-router-dom";

import {useSelector} from 'react-redux';

const PokemonOverview = () =>{
    const allPokemons = useSelector(state => state.AllPokemons);
    const {id} = useParams();
    const thisPokemon = allPokemons.map(pokemon => pokemon.id === id)

    return(
        <div>
            <h1>{thisPokemon.name}</h1>
        </div>
    )
}

export default PokemonOverview;

我不知道这种方法是否正确，但我没有收到此组件中的任何数据。我在 youtube 上关注了一些教程，每个人都以同样的方式做到了这一点。如果我尝试将 <h1> 的值更改为“你好”，它会在单击列出的口袋妖怪之一后正确显示..

我做错了什么？请帮助我的人。我到处找，找不到任何方法：/

Answer 1

首先，请检查您在const {id} = useParams(); 获得的“id”。

那么，请检查您从const allPokemons = useSelector(state => state.AllPokemons); 获得的“allPokemons”是什么。如果“allPokemons”是一个对象，那么const thisPokemon = allPokemons.map(pokemon => pokemon.id === id) 将无法正常工作。此映射逻辑仅在“allPokemons”是一个数组时才有效。

最后，请检查pokemon.id === id中“id”的数据类型。 “id”可以是字符串类型，但如果“pokemon.id”是数字类型，则检查将失败，“id”正确时的事件。例如，10 === "10" 是 false。如果是这种情况，您可以使用 parseInt(id) 函数包装“id”。

Answer 2

试试

allPokemons.find(pokemon => pokemon.id === id)

编辑： map 和 filter 将始终返回一个数组。因此，如果我们只想要一项，我们应该使用 array.find