Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

182
Visualizações
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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda