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

Posted 2023-04-15

【中文标题】即使用户有一些播放列表，Spotify Web API 也会为用户播放列表返回空项目

【英文标题】：The Spotify Web API returns null items for user playlist even when the user has got some playlists

【发布时间】：2021-01-18 17:51:06

【问题描述】：

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

import React,  useEffect  from "react";
import './App.css';
import  useDataLayerValue  from "./DataLayer";
import  getTokenFromResponse  from "./spotify";

import Login from "./Login";
import Player from "./Player";

import SpotifyWebApi from "spotify-web-api-js";

const spotify = new SpotifyWebApi();

function App() 
  const [ token , dispatch] = useDataLayerValue();

  useEffect(() => 
    const hash = getTokenFromResponse();
    window.location.hash = "";
    let _token = hash.access_token;

    console.log(_token)
    if (_token) 
      spotify.setAccessToken(_token);
      dispatch(
        type: "SET_TOKEN",
        token: _token,
      );

      spotify.getMe().then((user) => 
        console.log(user)
        dispatch(
          type: "SET_USER",
          user: user,
        );
      );

      spotify.getUserPlaylists().then((playlists) => 
        console.log(playlists)
        dispatch(
          type: "SET_PLAYLISTS",
          playlists: playlists,
        )
      )
    
  , [])

  return (
    <div className="app">
      token ? <Player spotify=spotify /> : <Login />
    </div>
  );


export default App;

我的 spotify.js 文件

export const authEndPoint = "https://accounts.spotify.com/authorize"

const redirectUrl = "http://localhost:3000/"

const clientID = "My_client_ID"

const scopes = [
    "user-read-currently-playing",
    "user-read-recently-played",
    "user-read-playback-state",
    "user-top-read",
    "user-modify-playback-state",
]

export const getTokenFromResponse = () => 
    return window.location.hash
        .substring(1)
        .split("&")
        .reduce((initial, item) => 
            var parts = item.split("=");
            initial[parts[0]] = decodeURIComponent(parts[1]);

            return initial;
        , );
;

export const loginUrl = `$authEndPoint?client_id=$clientID&redirect_uri=$redirectUrl&scope=$scopes.join("%20")&response_type=token&show_dialog=true`

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

href: "https://api.spotify.com/v1/users/syq0nm9vazzq9oddoozq2z5d3/playlists?offset=0&limit=20", items: Array(0), limit: 20, next: null, offset: 0, …
href: "https://api.spotify.com/v1/users/syq0nm9vazzq9oddoozq2z5d3/playlists?offset=0&limit=20"
items: []
limit: 20
next: null
offset: 0
previous: null
total: 0
__proto__: Object

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

请大家帮帮我，我花了 3 天时间寻找建议。

【问题讨论】：

您在浏览器的网络选项卡中看到了什么？还可以尝试通过邮递员或任何其他客户端发送 API 并查看结果。这将帮助您确定问题出在您的反应代码或 API 调用中

@igk 我已经尝试过了，但它仍然返回项目：null。我什至使用 OAuth 令牌尝试了 spotify 自己的 web api 试用并得到了相同的结果

【参考方案1】：

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

【参考方案2】：

您所要做的就是进入您的App.js 文件，查看spotify.getUserPlaylists(userId) 并添加您的Spotify 用户ID，我认为它会运行。

【讨论】：

欢迎来到 SO 并感谢您帮助回答问题。你知道你可以格式化你的代码更容易阅读吗？ formatting help

【参考方案3】：

我刚刚遇到了这个问题。您还必须在授权范围数组中包含“读取”的范围：playlist-read-collaborative 和 playlist-read-private，正如文档的两个部分中所述，Get Current User's Playlists 端点需要这两个授权范围。不过，当客户端没有授权时，我不确定 200 是否是来自 API 的正确答案/状态代码，并且这种情况的答案是一些数据或没有。

您的“我的 spotify.js”文件应如下所示：

export const authEndPoint = "https://accounts.spotify.com/authorize"

const redirectUrl = "http://localhost:3000/"

const clientID = "My_client_ID"

const scopes = [
    "user-read-currently-playing",
    "user-read-recently-played",
    "user-read-playback-state",
    "user-top-read",
    "user-modify-playback-state",
    "playlist-read-collaborative",
    "playlist-read-private"
]
...