Summery : it will update the state of values only if value of success is changed :) but the problem here is that the values are getting printed 2 times.
Any thoughts?
Just to make sure that I understand the problem. When you say that the values are being printed twice, you mean in the console, right? And, since you've got two console.logs, does that mean that it gets printed four times in total?
So I wanted to assign the fetched data to my JSX elements in component. So I thought why not to check if it is printing correctly. here is what happened: console.log("data retrieved : ", data); prints exact retrieved data. but console.log(values); this prints all empty values. So I thought the setValues() didn't work out.
After that I started to find out why my retrieved data is not assigned to setValues(). So I saw your post and I entered [values.success] in useEffect().
This correctly assigns fetched data into setValues and prints console.log(values); But problem here values gets printed two times. First with empty values and second with assigned values. This is mainly because useEffect method runs twice. first when DOM is mounted and second when value of success changed after fetching data from API. Hence I also didn't want this.
So I thought, lets keep this printing values aside. I did not print the console.log(values) as I knew that it will be empty. I also didn't write console.log("data retrieved : ", data); as I knew that fetching works fine. What I did was, I kept the [ ] in useEffect() empty as before. I fetched data and assigned data values using setValues.
After this, I directly used the values (values.name, value.description, value.loading, value.success) in my JSX and it worked fine and that was my end goal.
But I couldn't find solution to one question - why does console.log(values) prints empty values but in actuality the setValues works fine and assigns values and you can use those in your JSX.
PS: I know this comment has new level of verbosity ;)
Thanks for such a detailed explanation! It is very helpful to understand what exactly you mean and to see what you've tried and why. Also, I'm glad you managed to get it to work as you wanted.
The reason why console.log() printed stuff twice is that useEffectwas running twice. Once when the page was first rendered (but before the data was fetched) and once on the re-render caused by retrieving the data. useEffect fires both on the first load of the page and on every state change (unless, obviously, you narrow it down in the dependency array). Since getCourseByName is an asynchronous operation, it will change the state after the page has loaded for the first time, thus triggering a re-render.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
amazing post :) it really solved my problem.
here is what I wanted to do -
I was fetching the data from my backend method -
after that I just added this to use effect method -
and I got my values printed right!
Summery : it will update the state of values only if value of success is changed :) but the problem here is that the values are getting printed 2 times.
Any thoughts?
Just to make sure that I understand the problem. When you say that the values are being printed twice, you mean in the console, right? And, since you've got two
console.log
s, does that mean that it gets printed four times in total?yes. console.log() print 4 times. Now below is detailed problem I had before doing comment on your post. see the useEffect.
first of all I wanted was to assign the fetched values to my state so that I can use it in my JSX of react component.
So I written following code :
So I wanted to assign the fetched data to my JSX elements in component. So I thought why not to check if it is printing correctly. here is what happened:
console.log("data retrieved : ", data);
prints exact retrieved data. butconsole.log(values);
this prints all empty values. So I thought thesetValues()
didn't work out.After that I started to find out why my retrieved data is not assigned to
setValues()
. So I saw your post and I entered[values.success]
inuseEffect()
.This correctly assigns fetched data into
setValues
and printsconsole.log(values);
But problem herevalues
gets printed two times. First with empty values and second with assigned values. This is mainly becauseuseEffect
method runs twice. first when DOM is mounted and second when value ofsuccess
changed after fetching data from API. Hence I also didn't want this.So I thought, lets keep this printing values aside. I did not print the
console.log(values
) as I knew that it will be empty. I also didn't writeconsole.log("data retrieved : ", data);
as I knew that fetching works fine. What I did was, I kept the[ ]
in useEffect() empty as before. I fetched data and assigned datavalues
usingsetValues
.After this, I directly used the
values
(values.name
,value.description
,value.loading
,value.success
) in my JSX and it worked fine and that was my end goal.But I couldn't find solution to one question - why does
console.log(values)
prints empty values but in actuality thesetValues
works fine and assigns values and you can use those in your JSX.PS: I know this comment has new level of verbosity ;)
Thanks for such a detailed explanation! It is very helpful to understand what exactly you mean and to see what you've tried and why. Also, I'm glad you managed to get it to work as you wanted.
The reason why
console.log()
printed stuff twice is thatuseEffect
was running twice. Once when the page was first rendered (but before the data was fetched) and once on the re-render caused by retrieving the data.useEffect
fires both on the first load of the page and on every state change (unless, obviously, you narrow it down in the dependency array). SincegetCourseByName
is an asynchronous operation, it will change the state after the page has loaded for the first time, thus triggering a re-render.