无法从自定义 Rails API 使用 React 访问 response.status

Question

I am trying to get the status of a request I do from a React website I am working on, using axios to fetch make requests to a RoR API I developed. I would like to confirm that the POST request succeeded by accessing the status value from this (which is the output of a console.log(response) :

Promise { <state>: "pending" }​
<state>: "fulfilled"​
<value>: Object { data: {…}, status: 201, statusText: "Created", … }​​
config: Object { url: "pathname", method: "post", data: "{\"user\":{\"email\":\"lou10@email.com\",\"username\":\"lou10\",\"password\":\"azerty\"}}", … }​​
data: Object { data: {…} }​​
headers: Object { "cache-control": "max-age=0, private, must-revalidate", "content-type": "application/json; charset=utf-8" }​​
request: XMLHttpRequest { readyState: 4, timeout: 0, withCredentials: false, … }
status: 201
statusText: "Created"​​
<prototype>: Object { … }
index.jsx:51:11

But when I try a console.log(response.status) all I get is an undefined .

Here is the code :

import axios from 'axios';
import { BASE_URL } from "./config.js";

const post = async (
  endpoint,
  body = null,
  jwt_token = null,
  header = { "Content-Type": "application/json" }) => {

  let opt = header;
  if (jwt_token){
      opt["Authorization"] = jwt_token
  }

  try {
    const response = await axios.post(BASE_URL + endpoint, body, { headers: opt })
    return response
  } catch (err) {
    console.error(`An error occurred while trying to fetch ${endpoint}. ${err}`);

  }
}

export default post;

const handleSignup = async ({ email, username, pwd }) => {
    let body = {
        user: {
            email: email,
            username: username,
            password: pwd
        }
    };
    return await post("/users", body);
};

useEffect(() => {
    if (passwordCheck === false) {
        console.log("Passwords do not match");
    } else if (passwordCheck === true && userData) {
        const response = await handleSignup(userData);
        console.log(response.status);
        // history.push({ pathname: "/", state: response.status });
    }
}, [passwordCheck, userData]);

I am thinking to change the response from my API, but I really doubt it is the right approach.

Edit 1: adding some complementary code

Answer 1

you have to declare the function you give in parameter to useEffect as async to be able to use await inside for your async function handleSignup

 useEffect(async () => {
if (passwordCheck === false) {
    console.log("Passwords do not match");
} else if (passwordCheck === true && userData) {
    const response = await handleSignup(userData);
    console.log(response.status);
    // history.push({ pathname: "/", state: response.status });
}
}, [passwordCheck, userData]);