Estoy tratando de enviar llamadas a la API utilizando el estado de uno de mis ganchos como carga útil en la solicitud HTTP. El problema que tengo es que el gancho es asíncrono y provoca un comportamiento irritante. Los dos problemas a los que me enfrento son:

1. El estado está un paso atrás cuando se envía la carga útil, por lo que la solicitud HTTP se procesa con mis datos inicializados que no quiero enviar.
2. El componente no se vuelve a renderizar con el estado actualizado.

Parte de mi código de implementación incluye:

Definición de función para la solicitud de obtención que establece el estado del rol que estoy usando

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

Función que maneja los cambios en el componente que activa el ciclo y llama a la función anterior, así como también envía la solicitud después.

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

Función que envía la solicitud HTTP POST:

 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' }) } }); }

¿Hay algo en mi implementación que estoy haciendo/no haciendo que me lleva a estar un paso atrás en el estado? También intenté escribir en un enlace useEffect con localRole como una entrada en la matriz de dependencia predeterminada, pero esto tampoco me ayudó.