SolidJS•2y ago

Object.keys returns undefined on JSX

<Show
when={Object.keys(fetchBal()["subscription"]).length === 0 }>
...
</Show>

<Show
when={Object.keys(fetchBal()["subscription"]).length === 0 }>
...
</Show>

console

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'subscription')
    at get when [as when] (Herostats.jsx:219:43)
    at Show.createMemo.equals [as fn] (dev.js:1408:44)
    at runComputation (dev.js:696:22)
    at updateComputation (dev.js:679:3)
    at createMemo (dev.js:238:10)
    at Show (dev.js:1408:21)
    at dev.js:516:12
    at untrack (dev.js:421:12)
    at Object.fn (dev.js:512:37)
    at runComputation (dev.js:696:22)

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'subscription')
    at get when [as when] (Herostats.jsx:219:43)
    at Show.createMemo.equals [as fn] (dev.js:1408:44)
    at runComputation (dev.js:696:22)
    at updateComputation (dev.js:679:3)
    at createMemo (dev.js:238:10)
    at Show (dev.js:1408:21)
    at dev.js:516:12
    at untrack (dev.js:421:12)
    at Object.fn (dev.js:512:37)
    at runComputation (dev.js:696:22)

22 Replies

REEEEE•2y ago

fetchBal() is returning undefined and you cant access subscription if it is undefined do fetchBal() && Object.keys(fetchBal()!["subscription"]).length === 0

Root:3000•2y ago

i'm using JSX ! doesn't work plus it's returning data just before calling setter function

DaOfficialWizard🧙•2y ago

why wouldnt the ! operator work on JSX? Works for me Also, Show needs a fallback prop. Since its basically a ternary under the hood.

REEEEE•2y ago

it doesn't need a fallback prop it's optional Okay, but the initial data will be undefined

DaOfficialWizard🧙•2y ago

every time ive used it without the fallback i get errors in the inspect tool

REEEEE•2y ago

I've never run into that weird

Root:3000•2y ago

export const [fetchBal, setFetchBal] = createSignal();

async func..
await fetch...
setFetchBal(await res.json());

console.log(Object.keys(fetchBal()["subscription"]).length);
console.log("check", JSON.stringify(fetchBal()["subscription"]) === '{}');

async func..
await fetch...
setFetchBal(await res.json());

console.log(Object.keys(fetchBal()["subscription"]).length);
console.log("check", JSON.stringify(fetchBal()["subscription"]) === '{}');

logs returns 0 and true one after another

Root:3000•2y ago

REEEEE•2y ago

yes, but when everything is evaluated, Show receives undefined first okay you can probably remove the ! then

DaOfficialWizard🧙•2y ago

yeah, i was told by another user just now that its probably a bug in solid-start that i was experiencing, fallback is optional.

Root:3000•2y ago

i'm using solid-js/web not solid-start

REEEEE•2y ago

and you want to check if fetchBal() !== undefined

Root:3000•2y ago

fetchBal() === undefined, removes an error but as the object is just empty {} this acts super weird

REEEEE•2y ago

!== not === we want to check if the data is available, then show the stuff

Root:3000•2y ago

yeah i was using reverse data as fallback

Root:3000•2y ago

is this somewhat related to being the {} is empty?

REEEEE•2y ago

umm maybe, is it not supposed to be empty?

Root:3000•2y ago

i have to handle when there's no subscription so in this case it's empty

REEEEE•2y ago

You could use the Switch Match components or change how you're doing it, reverse it so the fallback is when the data is unavailable also what do you mean it acts super weird when the object is empty?

Root:3000•2y ago

i just mean i'm not able to find solution yet

REEEEE•2y ago

<Show
when={fetchBal() !== undefined && Object.keys(fetchBal()["subscription"]).length !== 0 } fallback={<div> No Sub data </div>}>
<div>
Data is available
</div>
</Show>

<Show
when={fetchBal() !== undefined && Object.keys(fetchBal()["subscription"]).length !== 0 } fallback={<div> No Sub data </div>}>
<div>
Data is available
</div>
</Show>

Root:3000•2y ago

whoa it worked. thank you

Gaming

Programming

Object.keys returns undefined on JSX