即使用户有一些播放列表，Spotify Web API 也会返回用户播放列表的空项目

Question

我为此使用了 React，这是我的 App.js

\n

import React, { useEffect } from "react";\nimport './App.css';\nimport { useDataLayerValue } from "./DataLayer";\nimport { getTokenFromResponse } from "./spotify";\n\nimport Login from "./Login";\nimport Player from "./Player";\n\nimport SpotifyWebApi from "spotify-web-api-js";\n\nconst spotify = new SpotifyWebApi();\n\nfunction App() {\n  const [{ token }, dispatch] = useDataLayerValue();\n\n  useEffect(() => {\n    const hash = getTokenFromResponse();\n    window.location.hash = "";\n    let _token = hash.access_token;\n\n    console.log(_token)\n    if (_token) {\n      spotify.setAccessToken(_token);\n      dispatch({\n        type: "SET_TOKEN",\n        token: _token,\n      });\n\n      spotify.getMe().then((user) => {\n        console.log(user)\n        dispatch({\n          type: "SET_USER",\n          user: user,\n        });\n      });\n\n      spotify.getUserPlaylists().then((playlists) => {\n        console.log(playlists)\n        dispatch({\n          type: "SET_PLAYLISTS",\n          playlists: playlists,\n        })\n      })\n    }\n  }, [])\n\n  return (\n    <div className="app">\n      {token ? <Player spotify={spotify} /> : <Login />}\n    </div>\n  );\n}\n\nexport default App;\n

\n

我的 spotify.js 文件

\n

export const authEndPoint = "https://accounts.spotify.com/authorize"\n\nconst redirectUrl = "http://localhost:3000/"\n\nconst clientID = "My_client_ID"\n\nconst scopes = [\n    "user-read-currently-playing",\n    "user-read-recently-played",\n    "user-read-playback-state",\n    "user-top-read",\n    "user-modify-playback-state",\n]\n\nexport const getTokenFromResponse = () => {\n    return window.location.hash\n        .substring(1)\n        .split("&")\n        .reduce((initial, item) => {\n            var parts = item.split("=");\n            initial[parts[0]] = decodeURIComponent(parts[1]);\n\n            return initial;\n        }, {});\n};\n\nexport const loginUrl = `${authEndPoint}?client_id=${clientID}&redirect_uri=${redirectUrl}&scope=${scopes.join("%20")}&response_type=token&show_dialog=true`\n

\n

当我运行服务器时，我得到的响应是

\n

{href: "https://api.spotify.com/v1/users/syq0nm9vazzq9oddoozq2z5d3/playlists?offset=0&limit=20", items: Array(0), limit: 20, next: null, offset: 0, \xe2\x80\xa6}\nhref: "https://api.spotify.com/v1/users/syq0nm9vazzq9oddoozq2z5d3/playlists?offset=0&limit=20"\nitems: []\nlimit: 20\nnext: null\noffset: 0\nprevious: null\ntotal: 0\n__proto__: Object\n

\n

这是我的控制台中显示的内容，但我的 Spotify 帐户中有 2 个播放列表。\n我正在教程的帮助下创建此列表。我目前是一名学习者。它在教程中运行得非常好。我的代码中有错误吗？

\n

请有人帮助我，我花了三天时间寻找建议。

\n

Answer 1

我有同样的问题。对我来说，问题是我的播放列表没有添加到我的个人资料中。所以我所做的是：在 Spotify 的播放列表中，我单击“...”，然后从选项中单击“添加到个人资料”。将播放列表添加到我的个人资料后，我可以在我的应用程序中显示它们。