ReactJS componentDidMount, Spotify API 및 약속 가져 오기

Question

ReactJS, Spotify API 및 Promise 사용법을 배우고 있습니다. Spotify에서 뮤지션의 톱 앨범을 가져 와서 30 초 동안 재생하려고합니다.

나는 Spotify 패키지 spotify-web-api-node을 사용하고 있습니다. 저는 React 또는 JS에 대한 근본적인 것을 이해하지 못한다고 생각합니다. Syntax error: Unexpected token, expected ((11:8)

수입 반응 'react';

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