Question

我正在开发一个与Spotify API配合使用的项目，允许用户在其帐户中搜索和添加歌曲/播放列表。我将所有内容编写成反应，我发现没有编译器错误，唯一的错误是：

警告：数组或迭代器中的每个子节点都应该有一个唯一的＆＃34;键＆＃34;丙

然而，应用程序似乎没有任何效果，您无法将歌曲添加到播放列表，搜索播放列表等。我试图弄清楚我的API模块是否有问题，因为＆＃ 39;我唯一能想到的就是有问题并且没有任何错误。该模块如下所示，或者您可以查看repo这里是我们被告知使用的Spotify API Authorization Document

＆＃13;

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;

＆＃13;

Answer 1

您的代码存在一些问题：

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

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

API模块问题

1 个答案: