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

bvuwiixz  于 2023-01-04  发布在  React
关注(0)|答案(2)|浏览(92)

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

uqzxnwby

uqzxnwby1#

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

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

eoxn13cs2#

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

相关问题