React项目接入Spotify API获取播放列表后无法渲染如何解决？

问题原因及修复方案 #

1. 数组遍历无返回值导致渲染为空 #

你在playlists.map中使用了花括号包裹JSX但没有添加return语句，遍历返回的所有元素都是undefined，自然无法渲染内容，同时遍历生成的列表项缺少唯一key属性，也会触发React警告。

// 错误写法
{playlists.map(p => {
  <ListGroupItem>
    <div>{p.name}</div>
  </ListGroupItem>
})}

修复方案：

// 改为小括号隐式返回，同时添加唯一key
{playlists.map(p => (
  <ListGroupItem key={p.id}>
    <div>{p.name}</div>
  </ListGroupItem>
))}

2. 异步请求逻辑错误导致状态更新失效 #

你使用forEach配合async发起单播放列表的曲目请求，forEach不会等待异步操作完成就会直接执行后续的setPlaylists，此时你传入的Playlists还是空数组。后续请求完成后往数组push数据属于修改原数组的操作，React无法感知到状态变化，不会触发重渲染。你在控制台看到数组有数据，是因为控制台打印引用类型时会显示最终值，属于打印误导，实际状态更新时数组是空的。
修复方案：

// 替换原forEach部分的逻辑，用Promise.all等待所有请求完成后再更新状态
const playlistPromiseList = response2.data.items.map(async l => {
  const response3 = await axios.get(URL + 'playlists/' + l.id + '/tracks', {
    headers: {
      Authorization: "Bearer " + accessToken,
    }
  })
  return {
    id: l.id,
    name: l.name,
    items: response3.data.items
  }
})
const finalPlaylists = await Promise.all(playlistPromiseList)
setPlaylists(finalPlaylists)

3. useEffect直接传入async函数不符合规范 #

useEffect的回调函数如果直接声明为async，会返回Promise而非可选的清理函数，会触发React运行时警告，建议把异步逻辑包裹在内部函数中执行：

useEffect(() => {
  if (!accessToken) return
  // 内部声明异步函数执行请求逻辑
  const fetchSpotifyData = async () => {
    const response = await spotifyApi.getMe()
    // 剩余原有请求逻辑全部放在这里
  }
  fetchSpotifyData()
}, [accessToken])

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