Reputation: 151
In the app file I have a function called refreshList, when I update things in a database on the site I call it so that the state is updated and all the components are refreshed.
But I noticed something very strange when I called the function
const refreshList = () => {
userDetailsFunc (userDetails.code);
};
const userDetailsFunc = (cookiesName) => {
if (cookiesName) {
axios.get (`api / UserDetails? code = $ {cookiesName}`)
.then ((user) => {
setUserDetails (user.data);
}
It does not refresh the list and stays with the old details, but if I click again it will get the previous details, not what I updated.
I wanted to check it out and wrote
console.log (user.data);
And I saw that this is the content he gets in axios
But if I do refresh it gets the good content, why only if I refresh the page it works well, but when I call it through the function it does not change.
Anyone have any idea where I'm wrong?
Upvotes: 1
Views: 438
Reputation: 151
I corrected the mistake. Before that I wrote the code that edits the user in one line And in a row after that I wrote the refreshList
Then it came to refreshList before it was updated in a database.
axios.post('api/EditDetails', obj)
refreshList();
And when I changed the code to
axios.post ('api / EditDetails', obj) .then (() => {
refreshList ();
});
it worked out
Upvotes: 0
Reputation: 536
This is a very common behavior you face if you don't understand async/await
promise
topic.
Try this code:
const refreshList = async () => {
await userDetailsFunc (userDetails.code);
};
const userDetailsFunc = async (cookiesName) => {
if (cookiesName) {
const user = await axios.get (`api / UserDetails? code = ${cookiesName}`)
setUserDetails(user.data);
}
}
Upvotes: 2