CODEWITHSUNDEEP
reactjsfunctionpromiseaxiosrequest-promise
Yosua Michael
Yosua Michael

Reputation: 417

why axios return promise error in reactjs

i got error every time i click button on sign-in

TypeError: Cannot read property 'then' of undefined

, but after reload error gone. can i know what happened? here's my code on login

onSignIn(e){
    e.preventDefault()

    this.Auth.login(this.state.signInUsername, this.state.signInPassword)
      .then(res => {
        this.props.history.replace('/')
      })
      .catch(err => {
        alert(err)
      })
  }

and this is my auth code:

login(username, password){
    axios.post('http://localhost:3000/user/login', {
      username,
      password
    })
    .then(this._checkStatus)
    .then(res => {
      if(res.data.success === true){
        const payload = {
          name: username,
        }
        this.setToken(payload)
        return Promise.resolve(res)
      }else{
        console.log(res.data.message)
      }
    })
    .catch(err => {
      return Promise.reject(err)
    })
  }

Upvotes: 0

Views: 229

Answers (2)

Jose Cabrera Zuniga
Jose Cabrera Zuniga

Reputation: 2613

I believe you have -two- ".then" for your axios.post.The example provided at axios site uses

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

just one .then per axios call.

Upvotes: 0

Murli Prajapati
Murli Prajapati

Reputation: 9713

return axios from login function. 

login(username, password){
    return axios.post('http://localhost:3000/user/login', {
      username,
      password
    })
    .then(this._checkStatus)
    .then(res => {
      if(res.data.success === true){
        const payload = {
          name: username,
        }
        this.setToken(payload)
        return res;
      }else{
        console.log(res.data.message)
      }
    })
    .catch(err => {
      throw err;
    })
  }

Upvotes: 1

Related Questions