CODEWITHSUNDEEP
javascriptreactjs
Lou
Lou

Reputation: 166

Unable to access response.status with React from a custom rails API

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\":\"[email protected]\",\"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

Upvotes: 0

Views: 144

Answers (1)

Sid Barrack
Sid Barrack

Reputation: 1231

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]);

Upvotes: 1

Related Questions