SolidJSS
SolidJS•2y ago•
6 replies
Ghirigoro

Uninitialized signal in JSX but initialized in component

I have a component that is using an xstate machine to handle some state. At the top of the component I initialize the machine and set up a signal to handle the state, and then reference it in the JSX I return. The signal is initialized and works fine in the component body but is undefined in the JSX:
export const Authentication: Component = () => {
  const fsm = createActor(machine);
  const [getState, setState] = createSignal<State>(fsm.getSnapshot());

  // Works fine here...
  console.log("State", getState()); 

  fsm.subscribe((state) => {setState(state);});
  
  onMount(() => {fsm.start();});
  onCleanup(() => {fsm.stop();});

  // Fails in the Match component at runtime with the error:
  // Uncaught ReferenceError: getState is not defined
  return (
    <Page>
      <Switch>
        <Match when={getState().matches("Checking local storage")}>
          <Heading>Checking local storage...</Heading>
        </Match>
      </Switch>
     </Page>
  );
}

I'm new to Solid so I may be missing something about how components work, but the block at the top should execute before the return statement right? Is Solid doing some compiler magic that I'm not aware of? Dumb mistake elsewhere that I'm too undercaffeinated to see?

P.S. - This is being built with Vite and the Solid plugin.

P.P.S. - This seems to only happen with Match or Show. If I use one of my own components I can access getState just fine (e.g. <Heading>{getState().value}</Heading> works fine)
Was this page helpful?