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

Question

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

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

获取此数据时，<Intro />将显示组件。如果下载结束，页面将重定向到/home，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 后，位置将更改为 Pokemon 的 /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

首先，请检查您在 处获得的“id”是什么const {id} = useParams();。然后，请检查您从 获取的“allPokemons”是什么const allPokemons = useSelector(state => state.AllPokemons);。如果“allPokemons”是一个对象，则将const thisPokemon = allPokemons.map(pokemon => pokemon.id === id)无法正常工作。此地图逻辑仅在“allPokemons”是一个数组时才有效。最后，请检查“id”中的数据类型pokemon.id === id。“id”可以是字符串类型，但如果“pokemon.id”是数字类型，则检查将失败，即使“id”正确。例如，10 === "10"是false。如果是这种情况，您可以用parseInt(id)函数包装“id”。

Answer 2

尝试allPokemons.find(pokemon => pokemon.id === id)编辑：地图和过滤器将始终返回一个数组。因此，如果我们只想要一项，我们应该使用 array.find