亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

React router - 正確設置詳細信息頁面的 useParams

React router - 正確設置詳細信息頁面的 useParams

慕無忌1623718 2023-11-12 21:50:35
可能這會是一些小錯誤,但我真的不知道為什么它不起作用。我有 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>例如值更改為“你好”,則在單擊列出的神奇寶貝之一后它會正確顯示。我究竟做錯了什么?請有人幫助我。我到處尋找但找不到任何如何做到這一點:/
查看完整描述

2 回答

?
長風秋雁

TA貢獻1757條經驗 獲得超7個贊

首先,請檢查您在 處獲得的“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”。


查看完整回答
反對 回復 2023-11-12
?
守著一只汪

TA貢獻1872條經驗 獲得超4個贊

嘗試

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

編輯:地圖和過濾器將始終返回一個數組。因此,如果我們只想要一項,我們應該使用 array.find


查看完整回答
反對 回復 2023-11-12
  • 2 回答
  • 0 關注
  • 201 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號