使用REACT.js和AXIOS从POKEAPI获取对象数组

Question

我选择用POKEAPI开始学习API处理。我在一个步骤，我需要得到每个口袋妖怪的flavor_text(让我们说的描述)，但我不能因为某些原因。

这是一个特定口袋妖怪的JSON结构:https://pokeapi.co/api/v2/pokemon-species/bulbasaur.

这里是我的useEffect试图得到它。获取栖息地的行工作和显示在我的网站上，所以我猜我的问题来自我的setDescription中的地图，但我不能确定。

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]，但这不起作用。

Answer 1

由于您只从这些数据中设置状态，并且看起来第二个结果不需要等待第一个结果执行，因此您可以在相同的响应/承诺上执行这两个结果:

useEffect(() => {
const controller = new AbortController();
axios
.get(url2 + `${pokemon.name}`, { signal: controller.signal })
.then((res) => {
setHabitat(res.data.habitat.name))
const flavorTextEntrieList =  res.data.flavor_text_entries;
setDescriptions(flavorTextEntrieList.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]);

Answer 2

每个then需要返回一些要在下一个可链then中处理的东西。用.then((res) => { setHabitat(res.data.habitat.name); return res; })代替.then((res) => setHabitat(res.data.habitat.name))