Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

181
Vistas
Handling state when making multiple function calls in React with hooks as a parameter

I'm trying to send API calls using the state of one of my hooks as a payload in the HTTP request. The issue I'm having is that the hook being asynchronous is causing irritating behaviour. The two issues I'm facing are:

  1. The state is one step behind when sending the payload, so the HTTP request is going through with my initialised data which I don't want to send.
  2. The component is not re-rendering with the updated state.

Some of my implementation code includes:

Function definition for get request that sets state to the role i'm using

    function roleSelector(role_id: string) {
        webHelpers.get('/api/worker/role/' + role_id, environment, 'api', token, (data: any) => {
            setLocalRole(data);
        });
    }

Function that handles the changes in component which trigger the cycle and call the above function as well as send off the request after.

    function handleAuxChange(aux_value: boolean, role_id: string) {
        roleSelector(role_id);
        localRole.skills = [];
        localRole.allow_aux = !aux_value;
        updateRole(localRole);
    }

Function that sends off the HTTP POST request:

    function updateRole(role: UserRole) {
        let skills = [...role.skills];
        role.details.forEach(s => {
            skills.push({ skill_id: s.skill.id, level_id: s.level.id })
        });
        role.skills = skills;
        webHelpers.post('/api/worker/role', environment, 'api', role, token, (data: any) => {
            if (data.status === undefined) {
                enqueueSnackbar('role successfully set to active!', { 'variant': 'success' });
            }
            else {
                console.log(role);
                enqueueSnackbar(`${data.status}: Unable to apply changes to the role`, { 'variant': 'error' })
            }
        });
    }

Is there something in my implementation that i'm doing/not doing that's leading me to be a step behind in state? I've tried writing in a useEffect hook too with localRole as an entry in the default dependency array but this was no help for me either.

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

You could make roleSelector return the data. And the handleAuxChange can use the info directly.

eg.

function roleSelector(role_id: string, cb: (data:any) => void) {
   return webHelpers.get('/api/worker/role/' + role_id, environment, 'api', token, (data: any) => {
     setLocalRole(data);
     cb(data);
   });
}

function handleAuxChange(aux_value: boolean, role_id: string) {
   roleSelector(role_id, localRole => {
     localRole.skills = [];
     localRole.allow_aux = !aux_value;
     updateRole(localRole);
   });
}
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda