在 React 中映射时处理多个 get 请求

Question

我有一个组件，其中我 map() 通过一个数组来渲染子组件。

这是我的代码的一部分：

// example pokemons
const pokemons = [
  {
    id: 1  
    name: "bulbasaur"
  },
  {
    id: 2,
    name: "ivysaur"
  },
  {
    id: 3,
    name: "venusaur"
  }
];

// map through pokemons
const mappedPokemons = pokemons.map((p, i) => {
  return <Pokemon key={i} pokemon={p} />;
});

// render
return (
  <div className="ml-3">
    <h1 className="text-center mb-5">Pokémons:</h1>
    <div className="row">{mappedPokemons}</div>
  </div>
);

在子组件中，使用 axios 完成获取请求以从 public API (pokeapi).

获取数据

const [pm, setPm] = useState(null);

useEffect(() => {
  axios
    .get("https://pokeapi.co/api/v2/pokemon/" + pokemon.id)
    .then((response) => {
      setPm(response.data);
    })
    .catch((error) => {
      console.log(error);
    });
}, [pokemon.id]);

我想实现的是在渲染组件之前等到收到所有数据，我听说过 Promise.all() 但我不确定在哪里实施它是否是正确的方法.

我做了这个 sandbox 所以你可以尝试一些东西。

Answer 1

如果状态被放入父组件，你可以很容易地等待所有的解决。将 pokemons 放入状态，然后：

// parent
useEffect(() => {
  Promise.all(
    pokemons.map(p => axios
      .get("https://pokeapi.co/api/v2/pokemon/" + p.id)
      .then(res => res.data)
    )
  )
  .then((allData) => {
    const combined = pokemons.map((p, i) => ({ ...p, data: allData[i] }));
    setPokemons(combined);
  })
  .catch(handleErrors); // don't forget this
}, []);

然后，只有 pokemons[0].data 存在时才渲染子组件，并根据需要使用 pokemon 属性中的数据。

在 React 中映射时处理多个 get 请求

Handle multiple get requests when mapping in React

javascript

api

get

promise

reactjs