0
128
VistasHow to manage dependents async await in ReactJS?
I'm still new to ReactJS and I'm having trouble doing an asyn await with dependencies from another request on axios.
I need to get a list of pokemon, this list returns me the name of pokemons.
With this list of names, I need to make another request, where I will pass this name that I received as a parameter.
In addition to passing the name as a parameter, I need to make a call with axios.get() using .map(). Because there are several calls I need to make. It is possible?
However, I am not able to do that. Can you tell me what I'm doing wrong?
Here's my code I put into codesandbox.io
import React from "react";
import axios from "axios";
import "./styles.css";
const App = () => {
const BASE_URL = "https://pokeapi.co/api/v2";
const getAllPokemons = async () => {
const { data } = await axios.get(`${BASE_URL}/pokemon`);
// Here is my pokemon list
console.log(data);
data.results.map((poke) => getPokeType(poke));
};
const getPokeType = async (poke) => {
const { data } = await axios.get(`${BASE_URL}/type/${poke.name}`);
console.log("data: ", data);
};
React.useEffect(() => {
getAllPokemons();
}, []);
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
);
};
export default App;
Thank you very much in advance.
·
Juan Pablo Isaza
Responde la pregunta