Async/Await returning undefined in contextApi-CodePudding

I'm making a login structure with Context, and inside my AuthProvider the asynchronous function still returning undefined. I'm trying the professor login, and the axios return the response of the api, but in the AuthProvider the const data still undefined. I would be so grateful if you could help me. Thanks anyway. My AuthProvider:

import { useState } from "react";
import { useApi } from "../../hooks/useApi";
import { User } from "../../types/User";
import { AuthContext } from "./AuthContext";

export const AuthProvider = ({ children }: { children: JSX.Element }) => {
  const [user, setUser] = useState<User | null>(null);
  const api = useApi();

  const login = async (email: string, password: string, userType: string) => {
    const data = await api.login(email, password, userType);
    console.log(data);

    if (userType === "professor") {
      console.log("data");
      if (data?.admin && data.token) {
        setUser({
          name: data?.admin.name,
          email: data?.admin.email,
          id: data?.admin.id,
          userType: userType,
        });
        return true;
      }
    } else if (userType === "student") {
      if (data?.student && data.token) {
        setUser({
          name: data.student.name,
          email: data.student.email,
          id: data.student.id,
          userType: userType,
        });
      }
      return true;
    }

    return false;
  };

  const logout = () => {
    setUser(null);
  };

  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
};

My useApi:

import axios from "axios";

const api = axios.create({
  baseURL: process.env.REACT_APP_BASE_URL,
});

export const useApi = () => ({
  login: async (email: string, password: string, userType: string) => {
    if (userType === "professor") {
      const options = {
        method: "POST",
        url: process.env.REACT_APP_BASE_URL   "/adm/admin/login",
        headers: { "content-type": "application/json" },
        data: {
          email: email,
          password: password,
        },
      };

      axios
        .request(options)
        .then((response) => {
          console.log(response.data);
          return response.data;
        })
        .catch(function (error) {
          console.error(error);
        });
    } else if (userType === "student") {
      const response = await api.post("/aluno/student/login", {
        email,
        password,
      });
      return response.data;
    }
  },
});

CodePudding user response：

For professor login part of your code - the axios request is not awaited and axios call itself is not returned as a promise, so data from it is lost, basically. So, just add a return to it.

return axios
  .request(options)
  .then((response) => {
    console.log(response.data);
    return response.data;
  })
  .catch(function (error) {
    console.error(error);
  });

const responseData = await axios
  .request(options)
  .then((response) => {
    console.log(response.data);
    return response.data;
  })
  .catch(function (error) {
    console.error(error);
  });
return responseData;

Note: Additional issue was due to <form> html tag itself, onClick was attached to the button inside of the form, so when clicked - page was just reloaded.

CodePudding user response：

I think you are just missing a return in front of your axios.request() call. The if (userType === "professor") branch is not returning anything aka undefined.

In the then() arrow function you are returning the data but this data is not again returned by the api.login() function.