CODEWITHSUNDEEP
javascriptreactjsaxios
Ando
Ando

Reputation: 1827

react and axios POST throws an Uncaught (in promise) TypeError: parsed is undefined

I'm baffled what I'm doing wrong in my code. The GET call gets resolved, but when I try to do a POST call to the same server I get an error. My POST endpoint works fine with Postman.

apiConnection.js

function get(data){
  return axios.get("http://localhost:8080/api/questions", 
    {
      params:data.payload
    }, {
    headers: {
      'accept': 'application/json',
    }
  })
}

function post(data){
  console.log(data.payload) //my payload is received here
  return axios.post("http://localhost:8080/api/answer", {
      params:data.payload
    }, {
      headers: {
        'accept': 'application/json',
      }
    }
  )
}

export { get, post }

Here is the error I get in the console

enter image description here

And here is how I make the call in react

index.js

GET (Receives response normally)

import { get, post } from "apiConnection.js"
...
componentDidMount(){
    const data = {
      payload: {
        linkId: getSlug()
      }
    }
    get(data).then((result) => {
      this.setState({reportId: result.data.report.id});
    })
  }

POST (Throws error)

vote(userVote){
    const data = {
      payload: {
        reportId: this.state.reportId,
      }
    }
    
    post(data).then((result)=>{
      this.state.questions[this.state.currentQuestion].vote = userVote
    });
  }

Upvotes: 0

Views: 4656

Answers (2)

Simon Le Pine
Simon Le Pine

Reputation: 1

Just came across this and noted @Ando's response.

So, knowing that I first tried a hard coded URL, it worked.

I then successfully did url.toString() and it worked.

Not sure why but Javascript seems to treat a an object string differently than a true string.

Upvotes: 0

Ando
Ando

Reputation: 1827

I have found the culprit of the issue but if someone can add more information about it, it might be helpful for others.

In my question, for brevity, I changed the request URL from imported constants to hardcoded links.

In my code, I have a variable for both GET and POST

return axios.post(apiEndpoints[data.ep], data.payload)

I import the endpoint variables like so

import * as apiEndpoints from './apiEndpoints';

apiEndpoints.js

const server = 'http://localhost:8080/'
const api_version = 'api/'
const base_url = server+api_version;

export const EP_QUESTIONS = base_url+'questions';
export const EP_ANSWER = base_url+'answer';

For some unknown reason EP_ANSWER throws the error even though I'm not making a typo when I define data.ep (data.ep has EP_ANSWER, which I checked a million times)

The solution was to just change EP_ANSWER to EP_ANS and everything worked as expected.

No idea why this is the case. It might be some global variable or a reserved word.

Upvotes: 1

Related Questions