Javascript React router-为详细信息页面正确设置useParams

也许这会是一个小错误，但我真的不知道为什么它不起作用

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

获取此数据时，将显示

组件。如果下载结束，页面将重定向到

/home

，而

listpookemons

组件将呈现如下一些结果

主视图-列表口袋妖怪

 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>

<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>

result=allPokemons.slice（0,9）.map（（pokemon，i）=>

因此，在单击一些呈现的口袋妖怪后，位置将更改为/pokemon/id of pokemon.。这部分工作正常

在我的app.js中

 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>

<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组件

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;

从“React”导入React；
从“react router dom”导入{useParams}；
从'react redux'导入{useSelector}；
const PokemonOverview=（）=>{
const allPokemons=useSelector（state=>state.allPokemons）；
const{id}=useParams（）；
const thisPokemon=allPokemons.map（pokemon=>pokemon.id==id）
返回(
{thisPokemon.name}
)
}
导出默认PokemonOverview；

我不知道这种方法是否正确，但我没有收到此组件中的任何数据。我在youtube上学习了一些教程，每个人都是这样做的。如果我尝试将

的值更改为“hello here”，它会在单击列出的口袋妖怪之一后正确显示

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

试试看

allPokemons.find（pokemon=>pokemon.id==id）

编辑：

---

map和filter将始终返回一个数组。因此，如果我们只需要一个项目，我们应该使用数组。首先查找，请在

const{id}=useParams（）；

检查“id”得到了什么

然后，请检查您从

const-allPokemons=useSelector（state=>state.allPokemons）；

中得到的“allPokemons”是什么。如果“allPokemons”是一个对象，那么

const-thisppokemon=allPokemons.map（pokemon=>pokemon.id==id）

将无法正常工作。只有当“allPokemons”是一个数组时，此映射逻辑才会工作

---

最后，请检查

pokemon.id===id

中“id”的数据类型。“id”可以是字符串类型，但如果“pokemon.id”是数字类型，则检查将失败，当“id”正确时，事件将失败。例如，

10==“10”

为

false

。如果是这种情况，您可以使用

parseInt（id）包装“id”

函数。

它返回空数组我已经更新了我的答案try array.find你能添加一个口袋妖怪数组的样本吗？返回未定义：/你是说所有口袋妖怪都在哪里？当然，{id（pin）：10 name（pin）：“Caterpie”image（pin）：“type（pin）：“bug”}你能在

console.log（allPokemons）

和

console.log（id）时发布你得到的信息吗

？谢谢你的回答，我一上电脑就会试试。似乎我不清楚useparams是做什么的。如果我做对了，它会使用当前url，例如/pokemon/3，所以{Id}=useparams将是3？或者我应该如何传递该Id？谢谢。我高度怀疑该Id是字符串类型。您可以尝试打印

口袋妖怪的结果。Id==Id

和

Id

的值。由于“Id”是从url获取的，因此它可以是“3”（字符串）而不是“3”（数字），这将使===“失败。我马上就去试试。我会让你知道的。你是对的，{id}”was字符串，所有口袋妖怪的id都是数字。谢谢。但我还有一个问题。如果我点击口袋妖怪，url会改变，但他的信息会显示在列出的口袋妖怪下面。我的意思是列出的口袋妖怪组件不会unload@Pinncik很抱歉反应太晚。问题解决了吗？