Spotify Web API：未捕获（承诺）TypeError：无法读取未定义的属性“setState”

Question

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

}

Answer 1

您将需要使用.bind或.bind箭头语法=>来声明您的promise回调。

Answer 2

.then(function(response){

Should be .then((response) => {

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

Answer 3

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: eg

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. eg

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

Answer 4

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.