使用REACT.js和AXIOS从POKEAPI获取对象数组{已回答}

umuewwlo  于 2023-01-05  发布在  iOS
关注(0)|答案(2)|浏览(89)

我选择用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],但不起作用。

mrfwxfqh

mrfwxfqh1#

因为你只需要从这些数据中设置状态,而且第二个结果看起来不需要等待第一个结果来执行,所以你可以在同一个响应/承诺上同时执行这两个操作:

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]);
x33g5p2x

x33g5p2x2#

每个then都需要返回某些内容,以便在下一个可链接的then中处理。请将.then((res) => setHabitat(res.data.habitat.name))替换为.then((res) => { setHabitat(res.data.habitat.name); return res; })

相关问题