呼喚遠方
2022-08-18 09:54:51
因此,我試圖做的是從用戶那里獲取所有播放列表,當我控制臺.log它時,我可以看到它正在工作。但是我收到一個關于使用數(shù)組來呈現(xiàn)getAll中的播放列表變量的子集合的錯誤,因為這是我試圖存儲它的地方。我對 react 和 javascript 很陌生,所以我確信這是一個愚蠢的錯誤。 class App extends Component { constructor(){ super(); var list = new Array(); const params = this.getHashParams(); //tokens saved here const token = params.access_token; if (token) { spotifyApi.setAccessToken(token); } this.state = { loggedIn: token ? true : false, nowPlaying: { name: ' Not Checked', albumArt: '', albumName: ' Nobody'}, getAll: {playlists: []} }; this.getNowPlaying = this.getNowPlaying.bind(this); this.getPlaylists = this.getPlaylists.bind(this); } getHashParams() { //uses authenticated users refresh and access token var hashParams = {}; var e, r = /([^&;=]+)=?([^&;]*)/g, q = window.location.hash.substring(1); e = r.exec(q) while (e) { hashParams[e[1]] = decodeURIComponent(e[2]); e = r.exec(q); } return hashParams; } getNowPlaying(){ spotifyApi.getMyCurrentPlaybackState() .then((response) => { this.setState({ nowPlaying: { name: response.item.name, albumArt: response.item.album.images[0].url, albumName: response.item.album.name } }); }) } getPlaylists(){ spotifyApi.getUserPlaylists() .then((response) => { console.log(response.items) this.setState({ getAll: { playlists: response.items } }); }) }
2 回答

繁華開滿天機
TA貢獻1816條經(jīng)驗 獲得超4個贊
React 不會以這種方式工作。你可以這樣做
render() {
return (
<>
All playlists:
<ul>
{
this.state.getAll.playlist.map((playlist, index) => (
<li key={index}> { playlist }</li>
))
}
</ul>
<button onClick={() => this.getPlaylists()}>
Check Playlists
</button>
</>
)
}
此外,您需要在構造函數(shù)中綁定所有函數(shù)或使用箭頭函數(shù)。
this.getNowPlaying = this.getNowPlaying.bind(this);

尚方寶劍之說
TA貢獻1788條經(jīng)驗 獲得超4個贊
你能嘗試更換...
{this.state.getAll.playlists}
跟。。。
{this.state.getAll.playlists.map(playlist => <div>{playlist}</div>)}
我認為現(xiàn)在您并沒有真正迭代播放列表數(shù)組。
添加回答
舉報
0/150
提交
取消