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>

因此，如果我理解正确，如果其中一个pokemon被点击，<PokemonOverview />将呈现并显示被点击的pokemon的数据。但它不起作用。

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>的值更改为"hello there"，则在单击列出的一个pokemon后，它会正确显示。。

我做错了什么？请帮帮我。我到处找都找不到该怎么做：/

Answer 1

首先，请检查您得到了什么"id"；，在CCD_ 6处。

然后，请检查什么是"；allPokemons"你从const allPokemons = useSelector(state => state.AllPokemons);得到。如果"；allPokemons"是一个对象，则const thisPokemon = allPokemons.map(pokemon => pokemon.id === id)将无法正常工作。此映射逻辑仅在"；allPokemons"是一个数组。

最后，请检查"；id"；在CCD_ 9中。"；id"；可以是字符串类型；pokemon.id"；如果是数字类型则检查将失败；id"；是正确的。例如，10 === "10"就是false。如果是这种情况；id"；具有CCD_ 12功能。

Answer 2

尝试

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

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