Блог

Это моя функция в моем утилитарном модуле Spotify:

 
savePlaylist1(name, trackUris) {
    if (!name || !trackUris.length) {
      return;
    }
    const accessToken = Spotify.getAccessToken();
    const headers = { Authorization: `Bearer ${accessToken}` };


    let userID;
    return fetch('https://api.spotify.com/v1/me', { headers: headers }
    ).then(response => {
      return response.json();
    }).then(jsonResponse => {
      userID = jsonResponse.id;
      return fetch(`https://api.spotify.com/v1/users/${userID}/playlists`, {
        headers: headers,
        method: 'POST',
        body: JSON.stringify({ name: name })
      }).then(response => {
        return response.json();
      }).then(jsonResponse => {
        const playlistID = jsonResponse.id;
        return fetch(`https://api.spotify.com/v1/playlists/${playlistID}/tracks`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            Authorization: `Bearer ${accessToken}`,
          },
          body: JSON.stringify({ uris: trackUris })
        })
      })
    })
  } // end of savePlaylist1 method
}

  

Это мой модуль контейнера, из которого я вызываю функцию: (за которым следует функция рендеринга)

 
savePlaylist() {
    const trackUris = this.state.playlistTracks.map(track => track.uri);
    Spotify.savePlaylist1(this.state.playlistName, trackUris).then(() => {
      this.setState({
        playlistName: 'New Playlist',
        playlistTracks: []
      });
    })
  }


 render() {
    return (
      <div>
        <div className="App" >
          < SearchBar onSearch={this.search} />
          <div className="App-playlist">
            < SearchResults searchResults={this.state.searchResults}
              onAdd={this.addTrack} />
            < Playlist playlistName={this.state.playlistName}
              playlistTracks={this.state.playlistTracks}
              onRemove={this.removeTrack}
              onNameChange={this.updatePlaylistName}
              onSave={this.savePlaylist} />
          </div>
        </div>
      </div>);
  }
  

это компонент плейлиста с безопасной кнопкой>

 
render() {
    return (
      <div className="Playlist">
        <input defaultValue={"New Playlist"} onChange={this.handleNameChange} />
        <TrackList
          tracks={this.props.playlistTracks}
          onRemove={this.props.onRemove}
          isRemoval={true}
        />
        <button className="Playlist-save" onClick={this.props.onSave}>
          SAVE TO SPOTIFY
        </button>
      </div>
    );
  }

  

он сохраняется с пустым списком, и я получаю следующую ошибку:

{ «ошибка»: { «статус»: 400, «сообщение»: «Недопустимый uri трека: null» } }

Наконец, это проект с помехами в codecademy, проблема заключалась в том, что он не загружал URI при вызове из API, это было потому, что он не был включен в функцию поиска как часть списка:

 search(term) {
    const accessToken = Spotify.getAccessToken();
    return fetch(`https://api.spotify.com/v1/search?type=trackamp;q=${term}`, {
      headers: {
        Authorization: `Bearer ${accessToken}`,
      },
    }).then(response => {
      return response.json();
    }).then(jsonResponse => {
      if (!jsonResponse.tracks) {
        return [];
      }
      return jsonResponse.tracks.items.map(track => ({
        id: track.id,
        name: track.name,
        artist: track.artists[0].name,
        album: track.album.name,
        uri: track.uri //this was missing!!!!
      }));
    });
  },