implicit-lime

How can I get Data and add it to a state without it having the possibility to be undefined?????

I want to get the Date from my backend but it can be undefined and therefore my states won't work...How can I make it not return an undefined? I mean that the state is only initialized when the data is loaded?

19 Replies

deep-jade•3y ago

but data will be undefined at runtime because the query might have to get data from the backend first; you basically can't use data to put it into the useState initializer in the same component like that. read: https://tkdodo.eu/blog/react-query-and-forms

React Query and Forms

Forms tend to blur the line between server and client state, so let's see how that plays together with React Query.

implicit-limeOP•3y ago

So the best approach would be putting everything into a child component?

fair-rose•3y ago

This is what I recommend based on my experience. This child component is then type-safe 🙂

implicit-limeOP•3y ago

What is so speical about react forms? I mean this is currently my code https://hastebin.skyra.pw/toleyijobu.ts I ve got a problem with the state and creating a new object to mutate It does already set it to false cause it wasnt able to fetch before initalizing the state so eveything is undefined I just want to get the data so I can fetch and show it correctly And right here it tells me that (I hope I understood that correctly) if it update fetches I have a problem and it does also use react hook in there

deep-jade•3y ago

what's special is that the value you pass to useState as an initial value will only be evaluated on the first render:

const [music, setMusic] = useState(data?.isMusic);

const [music, setMusic] = useState(data?.isMusic);

but on the first render, data is undefined. it doesn't magically sync once react-query gets data from the server ... I think I showed two approaches in the blog post how to "fix" it

implicit-limeOP•3y ago

can you tell me which two approaches?

implicit-limeOP•3y ago

You mean this one?

deep-jade•3y ago

yes

implicit-limeOP•3y ago

But in this case you are not using a state or do I misunderstand something?

deep-jade•3y ago

that's handled by react-hook-form in this example. with manual useState, it becomes:

const [clientMusic, setMusic] = React.useState(undefined)
const music = clientMusic ?? data?.isMusic ?? false

const [clientMusic, setMusic] = React.useState(undefined)
const music = clientMusic ?? data?.isMusic ?? false

implicit-limeOP•3y ago

I am sorry I have trouble understanding this So I fetch the data with the useQuery Hook And then I need to pass it to the state or similar thing…What exactly are the benefits of react hook form? Because If I see that correctly React Hook Form would fix a lot in my problem

fair-rose•3y ago

Yes, react hook form is great.

implicit-limeOP•3y ago

So If I just understood that correctly….After the data is fetched the Dom gets reloaded? Like a if I would switch a state?

fair-rose•3y ago

Your problem was that this did not happen in your code. useState does not listen to changes in your initial value

implicit-limeOP•3y ago

Damn Ok so my problem changed a bit and is not anymore this

implicit-limeOP•3y ago

It moved to this

implicit-limeOP•3y ago

my Query is either the data or undefined what makes this a bit ugly is there a way that this data is not undefined? Because options only wants to have data and not data or undefined

deep-jade•3y ago

options={data ?? []}

options={data ?? []}

implicit-limeOP•3y ago

Thx

Gaming

Programming

How can I get Data and add it to a state without it having the possibility to be undefined?????

Did you find this page helpful?