React中如何从JSON对象提取多个track.id拼接为逗号分隔参数调用Spotify接口

你当前操作的track是包含多个音轨对象的数组，直接取track.id无法获取到所有id值，按以下方式修改代码即可：

1. 先从track数组中提取所有id，使用join(',')拼接为逗号分隔的字符串，符合Spotify API的参数要求
2. 补全useEffect的依赖项，确保track、access_token更新时可以重新发起正确的请求
3. 增加边界判断，避免空数组、无token场景下发起无效请求

修改后的完整代码如下：

useEffect(() => {
  // 边界判断，异常场景直接终止请求逻辑
  if (!Array.isArray(track) || track.length === 0 || !access_token) return;

  // 提取所有id并拼接
  const trackIds = track.map(item => item.id).join(',');
  
  fetch(`https://api.spotify.com/v1/tracks?ids=${trackIds}`, {
    headers: { 'Authorization': 'Bearer ' + access_token }
  })
  .then(response => response.json())
  .then((data) => {
    console.log('Spotify Api Call - Music Page', data)
    const tranformedTracks = data.tracks.map(trackData => {
      console.log(trackData)
      return {
        albumCover: trackData.album.images[0].url,
        trackName: trackData.name,
        artistName: trackData.album.artists[0].name,
      };
    });
    setTopTracks(tranformedTracks);
    setTracksLoaded(true);
  });
// 补全依赖项，触发请求更新
}, [track, access_token]);

如果你的track数据是异步拉取的，上述边界判断会自动在track有有效值之后才发起请求，无需额外处理。

内容的提问来源于stack exchange，提问作者Ndango