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