CODEWITHSUNDEEP
javascriptreactjs
user7904085
user7904085

Reputation:

Spotify Web API: Uncaught (in promise) TypeError: Cannot read property 'setState' of undefined

I am getting Uncaught (in promise) TypeError: Cannot read property 'setState' of undefined. I'm trying to using this.setState to so rendering some tracks onto but limit to only 9 tracks want to see if doing everything correctly.

Here Code Below: 

import React from 'react';
require('dotenv').config();

// My Steps: //

// 1. Want to fetch for KD Rusha Top Ablums on Spoitify Done
// 2. Limit them to only 9 tracks
// 3. Add play button on top of each track to play 30 sec of the Song


// GO TO SPOTIFY AND GETTING KD RUSHA TOP ABLUMS lIMIT TO 9 SONGS
// WHEN YOU CLICK ON TOP OF THE ABLUMS A PLAY BUTTON ICON WILL SHOW TO INDICATE THAT YOU CAN PLAY 30 SECONDS OF SONG

export default class SpotifyComponent extends React.Component {

constructor(props){
    super(props);
    this.state = {
       artist: null,
    };
}

componentWillMount() {

var request = new Request('https://api.spotify.com/v1/artists/5JLWikpo5DFPqvIRi43v5y/', {
  method: 'GET',
  headers: new Headers({
  'Accept': 'application/json',
  'Content-Type': 'text/plain',
  'Authorization': 'Access Token Here'
  })

});

  fetch(request)// fetch the Spotify date from KD Rusha Account
    .then(function(response){
      var result = response.json()
        this.setState({// State artist albums
          albums: result,
          selectedTrack: [0]
        });

    console.log(this.setState);
    if (response.status >= 400) {
      throw new Error("Bad response from server");
    }
    return response.json();
  });
}

  render(){
    return(
      <ul className="spotify-cantainer">

      </ul>
    );
  }

}

Upvotes: 0

Views: 1385

Answers (4)

Dewansh Thakur
Dewansh Thakur

Reputation: 1

this generally happens when we get the response code 403 which means forbidden according to Spotify's API documentation. to solve this problem just add the scope of the response you want to get in the authentication URL and it will start working.

Upvotes: 0

Geraint
Geraint

Reputation: 3392

When you are in the then the context of this changes and no longer refers to the component. You have a couple of options to resolve this.

You could assign this to a variable and then use the variable: e.g.

var self = this;

request(...)
.then(function(response) {
   self.setState(...)
})

Or, if you are able to with your application you could use arrow functions instead of normal functions. e.g.

request(...)
.then((response) => {
   this.setState(...)
})

The reason for this is arrow function, by default bind to the scope. You can read more here: https://toddmotto.com/es6-arrow-functions-syntaxes-and-lexical-scoping/#functionality-lexical-scoping-this

Upvotes: 0

philipheinser
philipheinser

Reputation: 311

.then(function(response){

Should be .then((response) => {

If you don't use arrow functions you lose this context.

Upvotes: 1

Daniel A. White
Daniel A. White

Reputation: 190976

You will need to use .bind or the fat arrow syntax => do declare your promise callbacks.

Upvotes: 1

Related Questions