如何呈现 Spotify 播放列表数据？

Question

我正在尝试从 Spotify 中提取用户的 Spotify 播放列表信息并将其显示在我正在创建的应用程序上。

这是我采取的步骤，有人可以帮我看看错误在哪里吗？

1) 在 Spotify.js 中添加一个方法

  const Spotify = {
    bringPlaylist() {
      return fetch(`https://api.spotify.com/v1/me/playlists`)
        .then(
          response => {
            if (response.ok) {
              return response.json();
            }
            throw new Error("Request failed!");
          },
          networkError => {
            console.log(networkError.message);
          }
        )
        .then(jsonResponse => {
          return jsonResponse;
        });
    }
  };

2）将Spotify.js导入App.js，在App.js中创建一个方法调用bringSpotifylist，设置状态，绑定。

import Spotify from "../../util/Spotify.js";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      spotifyList: []
    };

    this.bringPlaylist = this.bringPlaylist.bind(this);
  }

  bringPlaylist() {
    Spotify.bringPlaylist().then(spotifyList => {
      this.setState({ spotifyList: spotifyList });
    });
  }

  render() {
    return (
      <div>
        <SpotifyPlaylist spotifyList={this.state.spotifyList} />
      </div>
    );
  }
}

• 这里是我参考的Spotify API信息：https://developer.spotify.com/console/get-playlists/?user_id=wizzler

Answer 1

问题是您创建了获取数据的函数，但从未调用过它。您必须将其移动到像 componentDidMount 这样的生命周期方法，使其异步并调用它：

  componentDidMount() { // App.js
    Spotify.bringPlaylist().then(spotifyList => {
      this.setState({ spotifyList: spotifyList });
    });
  }

您还需要 loading 和 error 状态的逻辑。在文档中阅读有关它的更多信息here。

编辑

下面是一个完整的例子，可以更好地解释：

import Spotify from "../../util/Spotify.js";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      spotifyList: [],
      loading: true,
      error: null
    };
  }

  componentDidMount() {
    Spotify.bringPlaylist().then(
      spotifyList => {
        this.setState({ spotifyList, loading: false });
      },
      error => {
        this.setState({
          loading: false,
          error
        });
      }
    );
  }

  render() {
    const { error, loading, spotifyList } = this.state;
    if (error) {
      return <div>Error: {error.message}</div>;
    } else if (loading) {
      return <div>Loading...</div>;
    } else {
      return (
        <div>
          <SpotifyPlaylist spotifyList={this.state.spotifyList} />
        </div>
      );
    }
  }
}

有两个新的状态属性：error 和 loading。根据哪个具有 truthy 值，将显示不同的 html。当组件挂载时，loading 将为真，因为数据将从 API 获取。它要么导致错误，要么导致成功获取，因此将显示错误 html 或 <Spotify/> 组件。