时间戳

首页 > 解决方案 > React - 如何在多次 api 调用后等待 UI 更新？

reactjs - React - 如何在多次 api 调用后等待 UI 更新？

问题描述

我是新手，需要一些帮助。

我创建了一个 Pokedex，该应用程序通过 API 调用生成数据，但随后它需要执行另一个 API 调用以获取更多数据，然后以相同的方式处理更多数据。

在我的情况下，用户需要按三次按钮才能生成“完整”信息。

我是否需要使用 React 中实现的“useEffect”钩子来解决这个问题，如果需要，如何解决？

当前代码：

    import Axios from "axios";
import React, { useState } from "react";

function PK() {
  const api = Axios.create({
    baseURL: "https://pokeapi.co/api/v2/",
  });

  const [pokemon, setPokemon] = useState({});
  const [pokemonDescription, fetchDescription] = useState({});
  const [evolution, pokemonEvolution] = useState({});

  const searchPokemon = () => {
    api.get(`pokemon/magnemite`).then((response) => {
      setPokemon({
        name: response.data.name,
        height: response.data.height,
        weight: response.data.weight,
        img: response.data.sprites.front_default,
        id: response.data.id,
        type: response.data.types[0].type.name,
        type2: response.data.types[1].type.name,
      });

      api.get(`pokemon-species/${pokemon.id}/`).then((response) => {
        console.log(response.data.evolution_chain);
        fetchDescription({
          entry: response.data.flavor_text_entries[0].flavor_text,
          evolution: response.data.evolution_chain.url,
        });
        api.get(`${pokemonDescription.evolution}`).then((response) => {
          console.log(response.data.chain.evolves_to[0].species.name);
          pokemonEvolution({
            evolution: response.data.chain.evolves_to[0].species.name,
          });
        });
      });
    });
  };

  return (
    <div>
      <h1 style={{ textTransform: "capitalize" }}>{pokemon.name}</h1>
      <h1>#{pokemon.id}</h1>
      <h1>{pokemon.weight / 10} Kg</h1>
      <h1>{pokemon.height * 10} Cm</h1>
      <img src={pokemon.img} alt="" />
      <h1 style={{ textTransform: "capitalize" }}>
        Type: {pokemon.type} {pokemon.type2}
      </h1>
      <h2 style={{ textTransform: "capitalize" }}>
        {pokemonDescription.entry}
      </h2>
      <h1 style={{ textTransform: "capitalize" }}>
        Evolution: {evolution.evolution}
      </h1>
      <button onClick={searchPokemon}>Click me</button>
    </div>
  );
}
export default PK;

第一次点击：在此处输入图像描述

第二次点击：在此处输入图像描述

第三次点击：在此处输入图像描述

所以，我不知道如何创建一个好的解决方案来同时进行调用或在所有调用完成后更新 UI。

提前致谢。

标签： reactjsreact-hooks

解决方案

const searchPokemon = () => {
    api.get(`pokemon/magnemite`).then((response) => {
      setPokemon({
        name: response.data.name,
        height: response.data.height,
        weight: response.data.weight,
        img: response.data.sprites.front_default,
        id: response.data.id,
        type: response.data.types[0].type.name,
        type2: response.data.types[1].type.name
      });
      api.get(`pokemon-species/${response.data.id}/`).then((response) => {
        fetchDescription({
          entry: response.data.flavor_text_entries[0].flavor_text,
          evolution: response.data.evolution_chain.url
        });
        api.get(`${response.data.evolution_chain.url}`).then((response) => {
          pokemonEvolution({
            evolution: response.data.chain.evolves_to[0].species.name
          });
        });
      });
    });
  };

用这个替换你的搜索功能，它会运行得很好。

推荐阅读