我需要我正在處理的專案的幫助，我希望能夠顯示我輸入的口袋妖怪的動作，我可以控制臺.log 一個物件陣列，其中包含我想要抓取和顯示的較小陣列，如何我可以這樣做嗎？我嘗試了 getPokemonNames 方法的集群，該方法應該獲取 pokemon 動作的名稱，但這是我無法再思考的地方。
import React, {useState} from 'react';
import PokemonName from './PokemonName';
import axios from 'axios';
function App() {
const [pokemon, setPokemon] = useState([])
const [loading, setLoading] = useState(false)
const [moves, setMoves] = useState([])
const getPokemon = async (name) =>{
setLoading(true);
const response = await axios.get(`https://pokeapi.co/api/v2/pokemon/${name}`)
const data = response.data;
setPokemon(data);
setMoves(data.moves);
setLoading(false);
console.log(data)
getPokemonNames(data.moves)
// const pokemonMovesAmount = pokemon.moves.map
}
const getPokemonNames = (data) =>{
console.log(data);
data.move.name.map((moves, key)=>(
<div key={key}>
<span>{moves.moves.name}</span>
</div>
))
}
return (
<>
<PokemonName getPokemon={getPokemon}/>
<div>
{!loading && pokemon ? (<div>
</div>): null}
<img src={pokemon.sprites?.front_default}/>
<div className="container">
{getPokemonNames}
</div>
</div>
</>
);
}
export default App;
這是口袋妖怪名稱組件
import React, {useState} from 'react'
const onSubmit =(e) =>{
e.preventDefault();
}
export default function PokemonName(props) {
const [search, setSearch] = useState('');
return (
<div>
<div>
<h1>{search}</h1>
<form onSubmit={onSubmit}>
<input onChange={e => setSearch(e.target.value)} type ="text" placeholder="Search for Pokemon"></input>
<button onClick={(e) => props.getPokemon(search)}>Search</button>
</form >
</div>
</div>
)
}
編輯，這顯示了更多關于我在搜索 pokemon mew 后回傳的資料
uj5u.com熱心網友回復：
第一步，確保你傳遞了引數資料
const [moves, setMoves] = useState([])
// since you set setMoves to be data.moves second step you can iterate over data only
return (
<>
<PokemonName getPokemon={getPokemon}/>
<div>
{!loading && pokemon ? (<div>
</div>): null}
<img src={pokemon.sprites?.front_default}/>
<div className="container">
{getPokemonNames(moves)}
</div>
</div>
</>
);
第二步，調整你的 getPokemon 方法
const getPokemonNames = (data) => {
return data.map(moveD, key)=>(
<div key={key}>
<span>{moveD.move.name}</span>
</div>
))
}
uj5u.com熱心網友回復：
您的 getPokemonNames 中存在錯誤。您正在嘗試執行 data.move.name.map 這意味著您正在從“資料”內部映射“移動”。您需要映射“移動”陣列。這是您如何做到的。
const getPokemonNames = (data) =>{
data.moves.map(item, key)=>(
<div key={key}>
<span>{item.move.name}</span>
</div>
))
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/380693.html
標籤：javascript 反应 目的 网络 戳