我正在建立一个口袋妖怪维基类型的页面作为一个初学者项目。我想从我通过axios得到的json对象中呈现出口袋妖怪的类型。但是,我似乎无法正确地对对象中返回的类型数组使用map方法。
目前,我正在尝试将typesItem常量设置为Map的
元素,然后将其放入属性列表中。我得到这个错误然而Pokemon.jsx:30 Uncaught TypeError:无法读取未定义的属性(阅读“map”)。所以我认为错误在我的第30行。几乎可以肯定是因为我搞砸了如何访问JSON对象的某些部分。
使用此命令查看json API https://pokeapi.co/
import React from "react";
import axios from "axios";
import "../styles/pokemon.css";
export default function Pokemon() {
const [inputPokemon, setInputPokemon] = React.useState("");
const [result, setResult] = React.useState({});
function handleKeyDown(e) {
if (e.key == "Enter") {
fetchPokemon();
setInputPokemon("");
}
}
async function fetchPokemon() {
try {
const response = await axios.get(
`https://pokeapi.co/api/v2/pokemon/${inputPokemon.toLowerCase()}`
);
setResult(response.data);
// console.log(response.data);
console.log(result);
} catch (error) {
console.error(error);
}
}
const typesItem = result.types.map((item) => <p>{item.type.name}</p>);
return (
<>
<div className="pokemon-input-container">
<h3>Search for Details about your Favorite Pokemon!</h3>
<br></br>
<input
className="pokemon-input"
type="text"
placeholder="Input Pokemon Name"
onChange={(e) => setInputPokemon(e.target.value)}
onKeyDown={handleKeyDown}
value={inputPokemon}
/>
</div>
<div className="pokemon-output-container">
<div className="name">Name: {result.name}</div>
<div className="type">Type: {typesItem}</div>
<div className="weight">
Weight: {result.weight} Height: {result.height}"
</div>
<div className="moves">Possible Moves: </div>
<div className="stats">Stats:</div>
<div className="abilities">Abilities: </div>
</div>
</>
);
}
2条答案
按热度按时间tpgth1q71#
目前时间很短,但下面的片段应该可以解决您的问题(其中包含一些评论)。
rsl1atfo2#
尝试插入此命令并告诉我它是否正在输出:
如果输出的是undefined,那么数据库调用中有问题
好吧,既然有结果,试试这个: