0

Espero que esté bien, tengo un problema para cancelar mi solicitud axios con el gancho useEffect en ReactJS.

Explicación

En primer lugar, debes saber que mi código usa un archivo llamado Requests.js, allí se almacenan mis solicitudes personalizadas, tales como: registro, inicio de sesión y consultar información de usuario.

En estas funciones recibo la url, los datos a enviar y algunos encabezados.

Cuando uso estas funciones en mi código principal, paso un token de cancelación creado por axios, este token se crea cuando se envía el formulario, y si el usuario abandona la página en ese período de tiempo, cancelo la solicitud de axios.

Donde puede tener el problema es cómo le paso el token de cancelación a axios, ya que lo paso en función en función, hasta que llego a la función de axios.

Request.js

```import { LOGIN_URL, SIGNUP_URL, GET_INFO_USER_LOGGED } from "../Config/api";
import { alertDanger } from "./notifications";

class Requests {
  _showNetworkErrorAlert(status) {
    if (status >= 400 && status < 500) {
      alertDanger("A client network error occurred.");
    } else if (status >= 500 && status < 600) {
      alertDanger("Platform server error.");
    } else {
      alertDanger("A connection error occurred.");
    }
  }

  async _post(url, args, headers) {
    console.log({ ...headers });
    try {
      const res = await axios.post(
        url,
        {
          ...args,
        },
        {
          ...headers, // Aquí recibo las configuraciónes y el token de cancelación
        }
      );
      return res;
    } catch (error) {
      this._showNetworkErrorAlert(error?.response?.status);
    }
  }

  async _get(url, args, headers) {
    console.log(headers);
    try {
      const res = await axios.get(url, {
        ...args,
        headers,
      });
      return res;
    } catch (error) {
      this._showNetworkErrorAlert(error.response.status);
    }
  }

  async login({ email, password, headers }) {
    
    // Aquí paso los parametros y el argumento "headers" tiene mi token
    const loginUser = await this._post(LOGIN_URL, { email, password }, headers);
    return loginUser;
  }

  async signup({ username, email, password, headers }) {
    const signupUser = await this._post(
      SIGNUP_URL,
      {
        username,
        email,
        password,
      },
      headers // lo mismo que el anterior...
    );
    return signupUser;
  }

  async getInfoUserLogged(token) {
    const userInfoLogged = await this._get(
      GET_INFO_USER_LOGGED,
      {},
      {
        authorization: `Bearer ${token}`,
      }
    );
    return userInfoLogged?.data?.data?.user;
  }
}

export default new Requests();```

El archivo que pienso que genera el problema:

```import { Redirect } from "react-router-dom";
import axios from "axios";

// import { useSelector } from 'react-redux';

// components
import LoginComponent from "./LoginComponent";
import { alertDanger, alertSuccess } from "../../../Helpers/notifications";

// Redux elements
import { connect } from "react-redux";
import { SetCurrentUserInfo } from "../../../Redux/Actions/UserActions";

// api links
import Resquests from "../../../Helpers/Resquests";

const LoginContainer = (props) => {
  const [credentials, setCredentials] = useState({
    email: "",
    password: "",
  });

  const [isLogged, setLogged] = useState(false);
  const [isLoading, setLoading] = useState(false);
  let cancelResquest = null;

  /*
  
    Aquí debería de cancelar mi petición, pero axios no lo hace.
  */
  useEffect(() => {
    return () =>
      cancelResquest && cancelResquest.cancel("Finalizando peticion");
  }, []);

  const onChangeCredentials = ({ target }) => {
    setCredentials({
      ...credentials,
      [target.name]: target.value,
    });
  };

  const onSubmitForm = async (ev) => {
    ev.preventDefault();
    setLoading(true);

    /*
      Aquí genero el token de cancelación y lo envio por un parámetro.
    */
    cancelResquest = axios.CancelToken.source();
    const res = await Resquests.login(
      {  
        email: credentials.email,
        password: credentials.password,

      }, // El tercer parametro es un objeto que llamé "cabeceras" allí coloco mi token
      {
        cancelToken: cancelResquest.token, // the token
      }
    );

    setLoading(false);

    if (res?.data?.ok === false) {
      alertDanger("Error in your credentials");
    } else if (res?.data?.ok === true) {
      alertSuccess("Successful login.");
      const userInfoLogged = await Resquests.getInfoUserLogged(
        res.data.data.token
      );

      props.SetCurrentUserInfo(userInfoLogged);
      console.log("en la linea 49", props.UserInformation);

      setLogged(true);
    }
  };


  return isLogged ? (
    <Redirect to="/" />
  ) : (
    <LoginComponent
      {...{ onChangeCredentials, ...credentials, onSubmitForm, isLoading }}
    />
  );
};

const mapStateToProps = (state) => ({
  UserInformation: state.UserInformation,
});

const mapDispatchToProps = {
  SetCurrentUserInfo,
};

export default connect(mapStateToProps, mapDispatchToProps)(LoginContainer);```

Muchas gracias de antemano por leer esto.

1 respuesta 1

0

Lo que está pasando es que en cada renderizado de tu componente (es decir cualquier cambio de estado) a tu variable cancelRequest se le vuelve a asignarse el valor null y al salir de tu vista y llegar al return de useEffect la condición no se cumple. Tienes algunas opciones para resolver esta cuestión.

Lo más sencillo sería que movieras tu variable fuera de tu componente para que no se vea afectada, así:

let cancelResquest = null;
const LoginContainer = (props) => {
  const [credentials, setCredentials] = useState({
    email: "",
    password: "",
  });

  const [isLogged, setLogged] = useState(false);
  const [isLoading, setLoading] = useState(false);

Podrías también manejar el valor de cancelRequest mediante useState como lo haces con tus otras variables, o podrías usar una useRef para asignar y mantener su valor.

Espero te sirva!

1
  • Hola amigo, gracias por responder a mi problema, un compañero y yo intentamos los que nos mencionas, pero la solicitud no se cancela, aún se realiza. Nos parece muy extraño. Commented el 13 oct. 2020 a las 21:58

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.