Reactjs 无法在我的Spotify帐户中保存我的新播放列表(我得到的曲目列表为空)
这是我的util模块Spotify中的函数: 这是我调用函数的容器模块:(后跟render函数)Reactjs 无法在我的Spotify帐户中保存我的新播放列表(我得到的曲目列表为空),reactjs,api,post,save,spotify,Reactjs,Api,Post,Save,Spotify,这是我的util模块Spotify中的函数: 这是我调用函数的容器模块:(后跟render函数) 保存播放列表(){ const trackUris=this.state.playlitracks.map(track=>track.uri); Spotify.saveplayli1(this.state.playliName,trackUris)。然后(()=>{ 这是我的国家({ 播放名:“新建播放列表”, 播放曲目:[] }); }) } render(){ 返回( ); } 这是
保存播放列表(){
const trackUris=this.state.playlitracks.map(track=>track.uri);
Spotify.saveplayli1(this.state.playliName,trackUris)。然后(()=>{
这是我的国家({
播放名:“新建播放列表”,
播放曲目:[]
});
})
}
render(){
返回(
);
}
这是带有安全按钮的播放列表组件>
render(){
返回(
保存到SPOTIFY
);
}
它正在使用空列表保存,我收到以下错误:
{
“错误”:{
“状态”:400,
“消息”:“无效的曲目uri:null”
}
}最后,这是codecademy中的干扰项目,问题是从API调用时没有加载URI,这是因为它没有作为列表的一部分包含在搜索函数中:
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!!!!
}));
});
},
您是否将this.savePlaylist=this.savePlaylist.bind(this)放在构造函数中?是的,我认为问题在于savePlaylist 1
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>
);
}
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!!!!
}));
});
},