第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

React router - 正確設(shè)置詳細(xì)信息頁面的 useParams

React router - 正確設(shè)置詳細(xì)信息頁面的 useParams

慕無忌1623718 2023-11-12 21:50:35
可能這會(huì)是一些小錯(cuò)誤,但我真的不知道為什么它不起作用。我有 React 應(yīng)用程序,當(dāng)它初始化時(shí),它從 Pokéapi 獲取數(shù)據(jù)并將其設(shè)置為 redux 狀態(tài)。獲取此數(shù)據(jù)時(shí),<Intro />將顯示組件。如果下載結(jié)束,頁面將重定向到/home,listPokemons組件將呈現(xiàn)如下所示的一些結(jié)果。主視圖 - 列表神奇寶貝 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>所以如果我理解正確的話,如果單擊其中一個(gè)神奇寶貝,<PokemonOverview />它將渲染并應(yīng)該顯示該單擊的神奇寶貝的數(shù)據(jù)。但這不起作用。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;我不知道這種方法是否正確,但我沒有收到此組件中的任何數(shù)據(jù)。我在 youtube 上看過一些教程,每個(gè)人都以同樣的方式這樣做。如果我嘗試將<h1>例如值更改為“你好”,則在單擊列出的神奇寶貝之一后它會(huì)正確顯示。我究竟做錯(cuò)了什么?請(qǐng)有人幫助我。我到處尋找但找不到任何如何做到這一點(diǎn):/
查看完整描述

2 回答

?
長風(fēng)秋雁

TA貢獻(xiàn)1757條經(jīng)驗(yàn) 獲得超7個(gè)贊

首先,請(qǐng)檢查您在 處獲得的“id”是什么const {id} = useParams();。

然后,請(qǐng)檢查您從 獲取的“allPokemons”是什么const allPokemons = useSelector(state => state.AllPokemons);。如果“allPokemons”是一個(gè)對(duì)象,則將const thisPokemon = allPokemons.map(pokemon => pokemon.id === id)無法正常工作。此地圖邏輯僅在“allPokemons”是一個(gè)數(shù)組時(shí)才有效。

最后,請(qǐng)檢查“id”中的數(shù)據(jù)類型pokemon.id === id?!癷d”可以是字符串類型,但如果“pokemon.id”是數(shù)字類型,則檢查將失敗,即使“id”正確。例如,10 === "10"false。如果是這種情況,您可以用parseInt(id)函數(shù)包裝“id”。


查看完整回答
反對(duì) 回復(fù) 2023-11-12
?
守著一只汪

TA貢獻(xiàn)1872條經(jīng)驗(yàn) 獲得超4個(gè)贊

嘗試

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

編輯:地圖和過濾器將始終返回一個(gè)數(shù)組。因此,如果我們只想要一項(xiàng),我們應(yīng)該使用 array.find


查看完整回答
反對(duì) 回復(fù) 2023-11-12
  • 2 回答
  • 0 關(guān)注
  • 248 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)