Spotify API:类型错误:将循环结构转换为JSON

Question

当我尝试运行代码时，收到错误Uncaught (in promise) TypeError: Converting circular structure to JSON。我查了错误代码，所有的答案都是关于循环引用的。然而，我不明白我的代码在哪里包含循环引用

我的React应用程序中有一个功能可以保存播放列表。该函数接受两个参数-playlistName(字符串(和trackURI(字符串数组(。以下是的功能

async savePlaylist(playlistName, trackURIs) {
//checks if playlistName and trackURIs are already set (i.e. we already 'ran' the function)
if (!(playlistName && trackURIs)) return;

//setup for GET request that gets userID
let currentAccessToken = accessToken;
let headers = { Authorization: `Bearer ${currentAccessToken}` };
let userID = await fetch("https://api.spotify.com/v1/me", {
headers: headers,
})
.then((response) => response.json())
.then((jsonResponse) => jsonResponse.id)
.catch((error) => {
console.log(`User is Fetch error: ${error}`);
});
//POST request to create playlist
let playlistID = await fetch(
`https://api.spotify.com/v1/users/${userID}/playlists`,
{
method: "POST",
headers: {
Authorization: `Bearer ${currentAccessToken}`,
"Content-Type": "application/json",
},
body: JSON.stringify({
name: playlistName
}),
json: true,
}
)
.then((response) => response.json())
.then((jsonResponse) => jsonResponse.id)
.catch((error) => {
console.log(`Playlist creation error: ${error}`);
});
await fetch(`https://api.spotify.com/v1/playlists/${playlistID}/tracks`, {
method: "POST",
headers: {
Authorization: `Bearer ${currentAccessToken}`,
"Content-Type": "application/json",
},
body: JSON.stringify({
uris: trackURIs,
}),
})
.then((response) =>
console.log(`Songs added to the playlist: ${response}`)
)
.catch((error) =>
console.log(`Error adding songs to playlist: ${error}`)
);
}

似乎给我带来问题的功能部分(基于控制台错误(是：

let playlistID = await fetch(
`https://api.spotify.com/v1/users/${userID}/playlists`,
{
method: "POST",
headers: {
Authorization: `Bearer ${currentAccessToken}`,
"Content-Type": "application/json",
},
body: JSON.stringify({
name: playlistName
}),
json: true,
}
)
.then((response) => response.json())
.then((jsonResponse) => jsonResponse.id)
.catch((error) => {
console.log(`Playlist creation error: ${error}`);
});

我的错误指向的正是这条

body: JSON.stringify({
name: playlistName
})

因此，在JSON.stringify方法中引用参数playlistName似乎会导致问题，但我不太清楚为什么会出现问题。我读过一些关于循环参考的文章，但我不知道它在我的案例中是如何应用的。

以下是在我的App.js文件中调用该函数的位置：

savePlaylist() {
console.log('Saving playlist')
let trackURIs = this.state.playlistTracks.map((track) => track.URI)
Spotify.savePlaylist(this.state.playlistName, trackURIs)
//this.setState({playlistName: "",  playlistTracks: []})
}

Answer 1

经过几个小时的代码挖掘，我发现了循环引用(很烦人，但学习体验很好(。

问题是这样的——希望有一天它能帮助其他人发现类似的问题：(

设置

我在我的App.js文件中定义了savePlaylist方法，并调用了Spotify对象savePlaylist函数，将其从我的状态传递给playlistName，以及跟踪URI。如果你想了解Spotify对象上方法的全部细节，请查看我的原始帖子。

savePlaylist() {
console.log('Saving playlist')
let trackURIs = this.state.playlistTracks.map((track) => track.URI)
Spotify.savePlaylist(this.state.playlistName, trackURIs)
this.setState({playlistName: "",  playlistTracks: []})
}

这个问题的另一个相关函数是这个函数(在App.js文件中定义(

updatePlaylistName (name) {
this.setState({playlistName: name})
}

我将这些方法(以及其他方法(作为传递到我的播放列表组件

<Playlist
playlistName={this.state.playlistName}
playlistTracks={this.state.playlistTracks}
onRemove={this.removeTrack}
onNameChange={this.updatePlaylistName}
onSave={this.savePlaylist}
/>        

问题

这是播放列表组件的完整代码，就像我在修复之前所做的那样

export class Playlist extends React.Component {
constructor(props) {
super(props);
this.handleNameChange = this.handleNameChange.bind(this)
}
handleNameChange(e) {
this.props.onNameChange(e)
}
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>
);
}
}

特别是这个

handleNameChange(e) {
this.props.onNameChange(e)
}

在我的handleNameChange方法中，我将整个事件对象传递给onNameChange(一个道具函数，对应于App.js中定义的updatePlaylistName函数(。实际上，我想将事件目标值传递给这个函数。

handleNameChange(e) {
this.props.onNameChange(e.target.value)
}

我做了这个改变，一切都如预期。