Javascript 如何制作显示api中特定数据的按钮

我试图为react中的每个映射相册创建一个按钮，并在我使用SpofityWebAPI单击该按钮（我还没有创建）时显示它。曲目和相册是不同的对象，因为它们在api中是不同的“类型”。在当前状态下，我可以输入艺术家的名字，例如：“dua lipa”，它将显示dua lipa的所有专辑，但如果我尝试调用这些曲目，它将显示每个专辑的第一首曲目

function App() {
  const spotify = Credentials();
  const [token, setToken] = useState('');
  const [inputAlbum, setInputAlbum] = useState('')
  const [albumsList, setAlbumsList] = useState('')
  const [tracksList, setTracksList] = useState('')


  useEffect(() => {
    const fetchToken = async () => {
      const tokenResponse = await axios('https://accounts.spotify.com/api/token', {
        headers: {
          'Content-Type' : 'application/x-www-form-urlencoded',
          'Authorization' : 'Basic ' + btoa(spotify.ClientId + ':' + spotify.ClientSecret)      
        },
        data: 'grant_type=client_credentials',
        method: 'POST'
      })
      setToken(tokenResponse.data.access_token);
    }

    fetchToken()
  },  [spotify.ClientId, spotify.ClientSecret])

  useEffect(() => {
    const fetchAlbums = async () => {
      console.log(token)
      const albumsResponse = await axios(`https://api.spotify.com/v1/search?q=${inputAlbum}&type=album,track&limit=10`, {
        method: 'GET',
        headers: { 'Authorization' : 'Bearer ' + token}
      })

      setAlbumsList(albumsResponse.data.albums.items)
      setTracksList(albumsResponse.data.tracks.items)
      console.log(albumsList)
      console.log(albumsResponse.data)
    }

    fetchAlbums()
  }, [token, inputAlbum])

  return (
    <form onSubmit = {() => {}}>
      <div>
        <input value={inputAlbum} onChange={(e) => setInputAlbum(e.target.value)}/>
        {albumsList && albumsList.map(album => (
        <div className={album}>
          <img src = {album.images[1].url}></img>
          <br/>
          <div><b>Artista:</b> {album.artists[0].name} </div>
          <strong>Nome do album: {album.name}</strong>
          <div><b>Data de lançamento:</b> {album.release_date}</div>
          <div><b>Número de músicas:</b> {album.total_tracks}</div>
        </div>))}

        {tracksList && tracksList.map(track => (<div className={track}>
        <div> {track.name} </div>
      
        </div>))}
      </div>
    </form>
   
  );
}

export default App;

函数应用程序（）{
const spotify=Credentials（）；
const[token，setToken]=useState（“”）；
常量[inputAlbum，setInputAlbum]=useState（“”）
常量[albumsList，setAlbumsList]=useState（“”）
const[tracksList，setTracksList]=useState（“”）
useffect（（）=>{
const fetchToken=async（）=>{
const tokenResponse=wait axios（'https://accounts.spotify.com/api/token', {
标题：{
“内容类型”：“应用程序/x-www-form-urlencoded”，
“授权”：“基本”+btoa（spotify.ClientId+：“+spotify.ClientSecret）
},
数据：“授予\类型=客户端\凭据”，
方法：“发布”
})
setToken（tokenResponse.data.access_token）；
}
fetchToken（）
}，[spotify.ClientId，spotify.ClientSecret]）
useffect（（）=>{
const fetchAlbums=async（）=>{
console.log（令牌）
const albumsResponse=等待axios(`https://api.spotify.com/v1/search?q=${inputAlbum}&type=album，track&limit=10`{
方法：“GET”，
标头：{‘授权’：‘承载人’+令牌}
})
setAlbumsList（albumsResponse.data.albums.items）
setTracksList（相册响应.数据.曲目.项目）
console.log（相册列表）
console.log（albumsResponse.data）
}
获取相册（）
}，[token，inputAlbum]）
返回(
{}}>
setInputAlbum（e.target.value）}/>
{albumsList&&albumsList.map（album=>(


艺人：{album.artists[0].name}
Nome do相册：{album.name}
lançamento数据：{album.release_date}
Número de músicas:{album.total_tracks}
))}
{tracksList&&tracksList.map（track=>(
{track.name}
))}
);
}
导出默认应用程序；