我选择用POKEAPI开始学习API处理,我现在需要得到每个口袋妖怪的flavor_text(比如说描述),但是由于某种原因我不能。
下面是一个特定口袋妖怪的JSON结构:https://pokeapi.co/api/v2/pokemon-species/bulbasaur.
这里是我的useEffect试图得到它,获取栖息地的行工作并显示在我的网站上,所以我猜我的问题来自setDescription中的Map,但我不能确定。
export default function Card({ pokemon }, { key }) {
const src = url + `${pokemon.id}` + ".png";
const [habitat, setHabitat] = useState(null);
const [descriptions, setDescriptions] = useState([]);
useEffect(() => {
const controller = new AbortController();
axios
.get(url2 + `${pokemon.name}`, { signal: controller.signal })
.then((res) => setHabitat(res.data.habitat.name))
.then((res) =>
setDescriptions(
res.data.flavor_text_entries.map((ob) => ob.flavor_text)
)
)
.catch((err) => {
if (axios.isCancel(err)) {
} else {
console.log("warning your useEffect is behaving");
}
});
return () => {
// cancel the request before component unmounts
controller.abort();
};
}, [pokemon]);
我尝试了控制台日志记录说明或说明[0],但不起作用。
2条答案
按热度按时间mrfwxfqh1#
因为你只需要从这些数据中设置状态,而且第二个结果看起来不需要等待第一个结果来执行,所以你可以在同一个响应/承诺上同时执行这两个操作:
x33g5p2x2#
每个
then
都需要返回某些内容,以便在下一个可链接的then
中处理。请将.then((res) => setHabitat(res.data.habitat.name))
替换为.then((res) => { setHabitat(res.data.habitat.name); return res; })