API 模块的问题

Question

我正在开发一个与 Spotify API 配合使用的项目，以允许用户搜索 songs/playlists 并将其添加到他们的帐户。我正在对所有代码进行反应，并且我已经到了没有编译器错误的地步，唯一的错误是：

Warning: Each child in an array or iterator should have a unique "key" prop.

但应用程序似乎没有任何作用，您无法将歌曲添加到播放列表、搜索播放列表等。我想弄清楚我的 API 模块是否有问题，因为那是我能想到的唯一有问题并且不会引发任何错误的东西。该模块如下所示，或者您可以查看我们被告知使用的 repo And here is the Spotify API Authorization Document

function Spotify() {
 function getAccessToken() {
  if(accessToken !== '') {
   return accessToken;
  } else if (window.location.href.match(/access_token=([^&]*)/) != null){
   accessToken = window.location.href.match(/access_token=([^&]*)/);
   expiresIn = window.location.href.match(/expires_in=([^&]*)/);
   window.setTimeout(() => accessToken = '', expiresIn * 1000);
   window.history.pushState('Access Token', null, '/');
  } else {
   window.location = `https://accounts.spotify.com/authorize?client_id=${clientId}&response_type=token&scope=playlist-modify-public&redirect_uri=${redirectURI}`;
  }

  async function search(term) {
   accessToken=getAccessToken();
    try {
      let response = await fetch(`https://api.spotify.com/v1/search?type=track&q=${term}`, {
        method: 'GET',
        headers: {
          Authorization: `Bearer ${accessToken}`
        }
      });
      if (response.ok) {
        let jsonResponse = await response.json();
        let tracks = jsonResponse.map(track => ({
         id: track.id,
         name: track.name,
         artist: track.artists[0].name,
         album: track.album.name,
         uri: track.uri
        }));
        return tracks;
      }
    } catch (error) {
      console.log(error);
    }
  }

  function savePlaylist(name, trackURIs) {
   if (name === undefined || trackURIs === undefined) {
    return;
   } else {
    let userAccessToken = getAccessToken();
    let headers = {Authorization: userAccessToken};
    let userId = findUserId(headers);
    let playlistID;
    fetch(`https://api.spotify.com/v1/users/${userId}/playlists`, {
     method: 'POST',
     headers: {
      Authorization: `Bearer ${accessToken}`,
      "Content-Type": 'application/json'
     },
     body: {
      name: name
     }
    }).then(response => {return response.json()}
    ).then(playlist => {
     playlistID = playlist.id;
    });
   }
  }

  function findUserId(headers) {
   accessToken = getAccessToken();
   let id;
   fetch(`https://api.spotify.com/v1/me`, {headers: headers}
    ).then(response => {return response.json()}
    ).then(jsonResponse => {
     id = jsonResponse[0].id;
    });
    return id;
  }
 }
}

export default Spotify;

Answer 1

您的代码存在一些问题：

SearchBar.js中的handleTermChange方法从输入中读取值不正确，应该是：this.setState({term: event.target.value});
搜索按钮只是一个link，你要绑定onClick事件，像这样：<a onClick={this.search}>SEARCH</a>
Spotify.js 中有些地方不对，目前 getAccessToken 方法封装了所有其他内容。

如果您使用 React Dev Tools 检查您的播放列表，您会发现 TrackList.js 中没有 id 属性，因此它始终为 null。这就是您收到警告的原因。

API 模块的问题

Issue with API Module

javascript

spotify

reactjs