如何解决无法将新的播放列表保存在我的Spotify帐户中我的曲目列表为空
这是我的util模块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
}
这是我从以下位置调用函数的容器模块:(随后是render函数)
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, “ message”:“无效的音轨uri:null” } }
解决方法
最后,这是codecademy中的干扰项目,问题是它没有加载URI(从API调用时),这是因为它没有作为列表的一部分包含在搜索功能中。>
search(term) {
const accessToken = Spotify.getAccessToken();
return fetch(`https://api.spotify.com/v1/search?type=track&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!!!!
}));
});
},
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。