I'm getting client data from the backend and I'am using Axios to call that method.
In then() when I get the response data, I want to make a condition that if its completed, to push it to the new array
export default function Client({selectedClient, setSelectedClient})
console.log(selectedClient) //the value comes
useEffect(() => {
axios
.get('api')
.then((response) => {
const { data } = response; //array of data
console.log(selectedClient) // the value doesn't come
data.forEach(element => {
if (element.CLIENT_ID == selectedClient){
console.log('single element', element)
}
});
})
.catch((error) => console.log("Get Method Error", error.message));
}, []);
So when I put selectedClient inside the then(), it will be empty.
How can I solve this?
You need to have selectedClient as a dependency in useEffect hook. So that hook can updated prop value when component mounts.
export default function Client({selectedClient, setSelectedClient})
console.log(selectedClient) //the value comes
useEffect(() => {
if (selectedClient) {
axios
.get('api')
.then((response) => {
const { data } = response; //array of data
console.log(selectedClient) // the value will come now.
data.forEach(element => {
if (element.CLIENT_ID == selectedClient){
console.log('single element', element)
}
}});
})
.catch((error) => console.log("Get Method Error", error.message));
}, [selectedClient]);
Note - You can remove the added if (selectedClient) { if you wanted to invoke the call even when it's not populated.
Related
I chose to start learning API handling with POKEAPI. I am at a step where I need to get the flavor_text of each pokemon (the description let's say) but I can't for some reason.
Here is the JSON structure for one specific pokemon: https://pokeapi.co/api/v2/pokemon-species/bulbasaur.
And here is my useEffect trying to get it. The line fetching the habitat works and displays on my website so I guess my issue comes from my map in setDescription but I can't be sure.
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]);
I tried console logging descriptions or descriptions[0] but that doesn't work.
Since you only setting up the state from those data and it doesn't looks like the second result need to wait the result from the first to perform you can do both on the same response/promise :
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]);
Each then need to return something to be handled in next chainable then. Replace .then((res) => setHabitat(res.data.habitat.name)) with .then((res) => { setHabitat(res.data.habitat.name); return res; })
Im getting data from axios async function and trying to assign to state in same function. When I print the values on console, i see that temporary value is not null but state is always null. when i rerender the page, state is not being null.
const [Pickup, setPickUp] = useState([]);
async function GetOrders() {
const result = await axios(
`EXAMPLEURL`,
);
setOrders(result.data);
var temp = [];
result.data.allOrders.forEach(element => {
if (element.order_type === 'PickupOrders') {
temp.push(element);
}
});
console.log(temp);
if (Pickup !== temp) {
setPickUp(temp);
}
}
useEffect(() => {
GetOrders();
const interval = setInterval(() => {
GetOrders();
console.log(Pickup);
}, 1000 * 5);
return () => clearInterval(interval)
}, []);
On console:
How can i fix this problem?
I assume you want to make a get request. Your axios function need to be completed such as ;
await axios
.get("YOUR URL", {
headers: // if you need to add header,
})
.then((response) =>{
setOrders(reponse.data);
})
.catch((error) => {
result = { errorMessage: error.message };
console.error('There was an error!', error);
});
return result;
Not completely sure what you're trying to achieve, but you can't compare Pickup !== temp this will be false all the time, you're comparing object references. Js will return all the time those values aren't equal.
This function GetOrders return a promise you don't need to use interval, you can use GetOrders.then(lambdaFunctionHere -> ());
I am making a request like this:
const createProgramari = async () => {
let prog = [];
try {
await axios.get('http://localhost:8000/api/programariByDentistID', {
params: {
id: JSON.parse(localStorage.getItem('user'))["id"]
}
})
.then(function (res) {
console.log(res);
if(res.status === 200) {
prog = res.data;
}
})
.catch(function (error) {
console.log(error);
});
setProgramari(prog);
} catch(e) {
console.log(e);
}
}
If I try to see this in my useEffect the variable 'programari' is an empty array (the value I initialized it with)
const [programari, setProgramari] = useState([]);
useEffect( () => {
// code to run on component mount
createProgramari();
console.log(programari);
}, [])
I tried printing the response and axios gets it right.
What am I doing wrong? Is there a place I could learn how to not do the same mistake?
The salient point here is that setProgramari is async in nature. If it is called, it doesn't necessarily imply that it will be executed right away. One way you can handle this is follows.
useEffect(() => {
createProgramari();
}, []);
// consider useMemo or useCallback based on your use case if need be
useEffect(() => {
// whatever logic you want to have
console.log(programari); // will get new value always
}, [programari])
The way you wrote the function is very confusing, I'd suggest refactoring this to
const createProgramari = async () => {
try {
const prog = (await axios.get('http://localhost:8000/api/programariByDentistID', {
params: {
id: JSON.parse(localStorage.getItem('user'))["id"]
}
})).data;
setProgramari(prog);
} catch (e) {
console.log(e)
}
}
To view data you can do something like this:
useEffect(() => {
createProgramari()
.then((someReturnedDataFromAPI) => { // Promise returned
console.log(programari)
})
}, []) // Initialization
in useEffect programari is equal with [] because setProgramari() not update already existed state in current component version, if set new state for programari, this modification propagate rerendering component
console.log(programari) work with current component state version
if you want dump programari you can move console.log outsite useEffect
in this case you get in console two dump - [] for first version and [ withData ] for version what rerender because setState()
or if you want use data from axios in useEffect you can return it how promise
I'm using class-based components in react. I have few components named as follows: Blogs, BlogsClient, BlogCard. When Blogs mounts I make a call to a function inside BlogClient named as getBlogContent to fetch me data using axios.
setBlogs = (blogs) => {
this.setState({ "blogs": blogs });
}
componentDidMount() {
getBlogContent(this.setBlogs);
}
where getBlogContent is:
let getBlogContent = (setBlogs) => {
store.set('loaded', false);
axios.get(ADMIN_URL + '/getAllBlogs')
.then(response => {
store.set('loaded', true);
setBlogs(response.data.Response);
})
.catch(error => {
store.set('loaded', true);
store.set('errorMessage', error);
})
}
I'm able to fetch data and update my state properly. But If there comes any error inside Blogs or BlogCard(which is called inside Blogs) it goes inside the catch of getBlogContent whereas it should be only responsible for catching Axios error. What am I missing here?
Ok, so it's hard to tell without knowing these errors..
But nonetheless, you should avoid setting the component's state outside that component. So, your code'd become:
componentDidMount() {
const blogContent = getBlogContent();
if (blogContent !== 'error'j this.setBlogs(blogContent);
}
let getBlogContent = () => {
store.set('loaded', false);
return axios.get(ADMIN_URL + '/getAllBlogs')
.then(response => {
store.set('loaded', true);
return response.data.Response;
})
.catch(error => {
store.set('loaded', true);
store.set('errorMessage', error);
return 'error';
})
}
I have a question about the correct usage with useEffect and setState in React Hooks.
here is my react app that gets a persisted configuration and some other data depending on the config like this:
function App() {
const [config, setConfig] = useState(null);
// some other states
useEffect(() => {
const fetchData = () => {
axios.get("/path/to/config").then(response => {
if (response.status === 200) {
return response.data
}
})
.then(data => {
setConfig(data.config);
// set some other states
})
.catch(error => {
console.log("Error:" + error);
})
}
fetchData();
}, [config]);
return (
<div >
...
</div>
);
}
If I run this App useEffect is instantly called twice one time for first render and then a second time because setConfig(data.config); is called in the axios get success function.
The user has the possibility to change his own config that is done in another request. If he does I want after state config changes that the config and some other data depending on the config is reloaded via this useEffect function.
Now since there is no setstate callback in react hooks I read somewhere I should use useEffect with the state variable in the dependency array.
How can I prevent that my useEffect is called twice right at the beginning?
I have the feeling that I am doing it all wrong.
Thank you in advance
You need to add an if condition in useEffect, because useEffect is called by default on first render.
useEffect(() => {
if(config !== null){
const fetchData = () => {
axios.get("/path/to/config").then(response => {
if (response.status === 200) {
return response.data
}
})
.then(data => {
setConfig(data.config);
// set some other states
})
.catch(error => {
console.log("Error:" + error);
})
}
fetchData();
}
}, [config]);
This is not right!
I guess this can call fetchData infinitely.