Reactivity lost if awaited function precedes?

So this is reactive (reloads the desired componant), but is out of order from what I need to happen.

<button id="but_sel"
   onClick={async (e) => {
      e.preventDefault();
      if(sessionSelected()){
         props.setActiveSession(sessionSelected());
         await set_session({id:sessionSelected()});
         props.setSection(undefined);
      }else{
         await message("please choose a session");
      }
   }}
>

<button id="but_sel"
   onClick={async (e) => {
      e.preventDefault();
      if(sessionSelected()){
         props.setActiveSession(sessionSelected());
         await set_session({id:sessionSelected()});
         props.setSection(undefined);
      }else{
         await message("please choose a session");
      }
   }}
>

This does not reload the desired component, but is the correct order for what I need to happen. How do I resolve this situation?

<button id="but_sel"
   onClick={async (e) => {
       e.preventDefault();
       if(sessionSelected()){
          await set_session({id:sessionSelected()});
          props.setActiveSession(sessionSelected());       
          props.setSection(undefined);
       }else{
          await message("please choose a session");
       }
   }}
>

<button id="but_sel"
   onClick={async (e) => {
       e.preventDefault();
       if(sessionSelected()){
          await set_session({id:sessionSelected()});
          props.setActiveSession(sessionSelected());       
          props.setSection(undefined);
       }else{
          await message("please choose a session");
       }
   }}
>

I need to ensure that the backend is updated first because the component that is loaded fetches the updated data as a createResource, so I need to make sure that data is correct. I am trying to avoid attempting to keep state in sync between the backend and frontend by using the backend as the source of truth. Since this is a Tauri app, since the backend is local, delays are not an issue.

SolidJS•3y ago•

32 replies

d34dbug

Reactivity lost if awaited function precedes?

So this is reactive (reloads the desired componant), but is out of order from what I need to happen.

<button id="but_sel"
   onClick={async (e) => {
      e.preventDefault();
      if(sessionSelected()){
         props.setActiveSession(sessionSelected());
         await set_session({id:sessionSelected()});
         props.setSection(undefined);
      }else{
         await message("please choose a session");
      }
   }}
>

<button id="but_sel"
   onClick={async (e) => {
      e.preventDefault();
      if(sessionSelected()){
         props.setActiveSession(sessionSelected());
         await set_session({id:sessionSelected()});
         props.setSection(undefined);
      }else{
         await message("please choose a session");
      }
   }}
>

This does not reload the desired component, but is the correct order for what I need to happen. How do I resolve this situation?

<button id="but_sel"
   onClick={async (e) => {
       e.preventDefault();
       if(sessionSelected()){
          await set_session({id:sessionSelected()});
          props.setActiveSession(sessionSelected());       
          props.setSection(undefined);
       }else{
          await message("please choose a session");
       }
   }}
>

<button id="but_sel"
   onClick={async (e) => {
       e.preventDefault();
       if(sessionSelected()){
          await set_session({id:sessionSelected()});
          props.setActiveSession(sessionSelected());       
          props.setSection(undefined);
       }else{
          await message("please choose a session");
       }
   }}
>

Reactivity lost if awaited function precedes?

Similar Threads

Reactivity lost if awaited function precedes?

Similar Threads

Similar Threads

Similar Threads