ReactJS componentDidMount、Fetch Spotify APIとPromise

Question

ReactJS、Spotify API、Promiseの使い方を学んでいます。私はSpotifyでミュージシャンのトップアルバムを取りに来て、そのトラックの30秒をプレイしようとしています。

私はspotify-web-api-nodeと呼ばれるSpotifyパッケージを使用しています。私はReactまたはJSについて何か基本的なことを理解していないと思います。 Syntax error: Unexpected token, expected ((11:8)

インポート 'リアクション'から反応します。

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

constのようなクラスの中に定義することはできません。

あなたは外に移動または削除する必要がありますいずれか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 { 

または

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

spotify-apiで提供されている約束を使用している方法は正しいです。ただし、はcomponentDidMountから返さないでください。 Reactにはこれがありません。

代わりに、約束ベースの機能を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); 
    }); 
} 

Qは、インポート直後にプロミスプロバイダーとして設定することもできます。

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