ReactJS componentDidMount, Fetch Spotify API und Promise

Question

Ich lerne, wie ReactJS, Spotify API und Promise verwendet. Ich versuche, Musiker Top-Alben auf Spotify zu holen und 30 Sekunden des Tracks zu spielen.

Ich verwende ein Spotify-Paket namens spotify-web-api-node Ich glaube, ich verstehe etwas grundlegend über React oder JS. Syntax error: Unexpected token, expected ((11:8)

importieren Reagieren von 'reagieren';

import SpotifyWebApi from 'spotify-web-api-node'; 
require('dotenv').config(); 


export default class SpotifyComponent extends React.Component { 
    // Create the api object with the credentials 
    const spotifyApi = new SpotifyWebApi({ 
    clientId : process.env.REACT_APP_SPOTIFY_CLIENT_ID, 
    clientSecret : process.env.REACT_APP_SPOTIFY_CLIENT_SECRET 
    }); 
// Save the access token so that it's used in future calls 
    componentDidMount() { 
    **(11:8)** --> return spotifyApi = new Promise((resolve, reject) => { 
     spotifyApi.clientCredentialsGrant() 

     .then(=> (data) { 
     console.log('The access token expires in ' + data.body['expires_in']); 
     console.log('The access token is ' + data.body['access_token']); 
     }); 

     // using Promises through Promise, Q or when - get Elvis' albums in range [20...29] 
     spotifyApi.getArtistAlbums('43ZHCT0cAZBISjO8DG9PnE', {limit: 10, offset: 20}) 
     .then(function(data) { 
      console.log('Album information', data); 
     }, function(err) { 
      console.error(err); 
     }); 
    }); 

    SpotifyWebApi.setPromiseImplementation(Q); 
    } 
} 

Answer 1

können Sie keine const Definition innerhalb einer Klasse wie das haben.

Sie sollten entweder nach draußen verschieben oder entfernen Sie die const:

// Create the api object with the credentials 
const spotifyApi = new SpotifyWebApi({ 
    clientId : process.env.REACT_APP_SPOTIFY_CLIENT_ID, 
    clientSecret : process.env.REACT_APP_SPOTIFY_CLIENT_SECRET 
}); 

export default class SpotifyComponent extends React.Component { 

oder

export default class SpotifyComponent extends React.Component { 
    // Create the api object with the credentials 
    spotifyApi = new SpotifyWebApi({ 
    clientId : process.env.REACT_APP_SPOTIFY_CLIENT_ID, 
    clientSecret : process.env.REACT_APP_SPOTIFY_CLIENT_SECRET 
    }); 

Answer 2

Die Art und Weise, um die Versprechungen der spotify-api bereitgestellt verwenden sind korrekt. Sie sollten jedoch keine Promise von componentDidMount zurückgeben. React hat keine Verwendung dafür.

Stattdessen nur Ihre Versprechen basieren Funktionen innerhalb componentDidMount.

componentDidMount() { 

    // the next line will actually trigger the promise to run 
    spotifyApi.clientCredentialsGrant() 
    .then((data) => { // this line was missing "=>" in your original code 
     console.log('The access token expires in ' + data.body['expires_in']); 
     console.log('The access token is ' + data.body['access_token']); 
    }); 

    // the next line also triggers a promise to run 
    spotifyApi.getArtistAlbums('43ZHCT0cAZBISjO8DG9PnE', {limit: 10, offset: 20}) 
    .then(function(data) { 
     console.log('Album information', data); 
    }, function(err) { 
     console.error(err); 
    }); 
} 

Sie können auch Q als Versprechen Anbieter direkt nach dem Import festgelegt.

import SpotifyWebApi from 'spotify-web-api-node'; 
SpotifyWebApi.setPromiseImplementation(Q);