发布API模块

Question

我正在开发一个与Spotify API一起工作的项目，允许用户搜索歌曲/播放列表并将其添加到他们的帐户中。我正在对所有的代码都进行反应，然后就没有编译器错误了，唯一的错误是：

警告:数组或迭代器中的每个子元素都应该有一个唯一的“键”支柱。

然而，应用程序中的任何东西似乎都不起作用，你不能将歌曲添加到播放列表中，搜索播放列表等等。我正在试图找出我的API模块是否出了问题，因为这是我唯一能想到的有问题的东西，不会抛出任何错误。模块如下所示，或者您可以查看存储库，下面是我们被告知使用的Spotify API授权文档

​

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

您的代码有一些问题：

1. handleTermChange方法在SearchBar.js中读取输入的值不正确，它应该是：this.setState({term: event.target.value});
2. 搜索按钮只是一个链接，您必须绑定onClick事件，如下所示：<a onClick={this.search}>SEARCH</a>
3. Spotify.js中有些地方不对，目前getAccessToken方法封装了其他所有东西。

如果使用React工具检查播放列表，您可以看到，在TrackList.js中没有id属性，因此它总是空的。所以你才会收到警告。