react why is setCategories is not defined error
Hello,
For wordpress im busy with making a component who reads all categories.
So far I have this :
but when I run this I see a message that setCategories is undefined.
Can someone explain why this happens and how to solve it
69 Replies
if the function is an async function then why r u not using await
shoudn't it be like this?
also u have catch block chained to the setCategories
i should be chained to the then()
tried that and it was not working
show da error
dis dont work either?
nope, still no difference
and with the latest code I do not see any error
I see only that the categories stays empty
what is your latest code
but also with your code the dropdown stays empty
what if u do something like this
does it show up as empty on the page or r u saying cause the console.log logs out empty array
maybw try like this
no luck
j updated the code
change the const to let
if doesn't work then try with updated code
the updated code gives also this :
dis u change the const response to let response?
i this is a common error u should be able to solve your own
no luck
no error message but also no dropdown anymore at the side
welp.. can't tell then
make sure your api is actually returning a response
console.log tbe response within the try block
I know that it does
do this
make sure to console after the response = awat ...
response :
and that is what I expect
is tbis what what shows up in dda console?
yep
and the categories is still a empty array
very very wierd
can u show a screenshot pls?
of the console
you are offline but still answered me
what's the 2nd console?
Array []
length: 0
the categories
u can set your status offline in discord
hmm
r u accessing these elements properly?
yep this is annpying me for several days now
as far as I know I do accessing things well
most wierd is if I put a map between it where I make a array of the same content , everything works well
ok instead of setCategories (fetchCategories())
try doing
setCategories( preCategories => preCategories = Array.from(fetchCategories()))
also console.log preCategories here
sorry, I do not see how to log preCategories here
but now in the console no errors but also no dropdown in the sidebar š¦
but categories stays a empty array
very very annoying problem
weird
idk man . I'm out of ideas
sorry
no problem
Thanks for trying to help me
welcome
In the example code, inside the useEffect
the console.log() should return empty array because of React batch updates. Even though categories is logged after the setter call, categories will return the previous state because it is in the same functional call (the same useEffect); even if you use a callback like setTimeout.
So if you expect to see the dropdown set in that useEffect, it could be a problem.
In that case, you can add another useEffect with [categories] as the dependency, and set your dropdown inside.
hmm, or I do misunderstood you
But this is also causing the drop down to be empty :
@missymae#2783
seeing the SelectControl element using options={categories}, I don't think the useEffect issue I described earlier is a problem.
hmm, when I do what you said I see this :
sory here a better one :
@missymae#2783
oof, my mistake š
can happen
im already happy that you try to help me
still any ideas ?
i think you are using await in useffect callback function
you cannot use await keyword like this is useffect
oke
maybe a stupid question but what is here exaclty the call back function
I would think this one :
but that is already async
the arrow function that is written at the starting of the useEffect
fetchPost function is async that means you can use await keyword inside fetchPosts function only
since the callback function in useeffect (the arrow function ) is not async and cannot be you cannot use await keyword directly in useefect
sorry but I think it is async
the arrow function in useeffect at the starting , see that function is not async
https://dev.to/sanjampreetsingh/why-async-callback-cannot-happen-in-react-useeffect-hook-ff#:~:text=Conclusion,the%20%22useEffect()%22%20hook.
if you want to learn more about this topic
DEV Community
Why async callback cannot happen in React useEffect hook?
One common issue that developers experience when utilising the ReactJs useEffect hook is...
is this what you are getting as a response from you api ?
yep
and if I read that article I do exactly what is asked as far as I can see
and you want to show the name in the drop down
right ?
right
instead of
setCategories(response)
trysetCategories(response[0].name)
he, I get a very wierd error message :
have you use h.map anywhere ?
nope, I never use map anywhere
weird
yep
can you show some more code
setCategories([response[0].name])
try this
no error message but the drop dowm is still empty š¦
this should have worked
sorry
you don't have to be its not you fault š
const formattedCategories = response.map(category => ({
value: category.id,
label: category.name
}));
setCategories(formattedCategories);
this was given by chatgpt have you tried this ?
i think this will work we were sending option in wrong format
yep. I tried somethig simular
but I found it wierd that response have the right format
And then I use map to put it also on that format
sounds double work to me
but it worked well
"as long as it works it is fine" XD
thanks
maybe the problem can be fixed with response.json() . I made this example
I can try
but as far as I know the json part is already done by api-fetch