慕無忌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”。

守著一只汪
TA貢獻1872條經驗 獲得超4個贊
嘗試
allPokemons.find(pokemon => pokemon.id === id)
編輯:地圖和過濾器將始終返回一個數組。因此,如果我們只想要一項,我們應該使用 array.find
添加回答
舉報
0/150
提交
取消