React中用setInterval轮询Spotify API遇无效Hook调用错误求助

问题根源 #

你遇到的错误完全是因为在普通函数getCurrentSong内部调用了useEffect——React Hook的规则明确要求：Hook只能在组件的顶层作用域调用，或者在自定义Hook的顶层调用，绝对不能嵌套在普通函数、循环、条件判断里。

另外你提到移除内部useEffect会陷入循环，是因为直接调用getCurrentSong会触发setSong，导致组件重渲染，重渲染又会再次调用getCurrentSong，形成无限循环。

修复方案 #

把API请求逻辑抽成独立函数，然后用顶层的useEffect同时处理初始化调用和定时轮询，完全符合Hook规则，也能避免循环：

// 抽离单独的API请求函数，仅负责获取数据并更新状态
const fetchCurrentSong = async () => {
  try {
    const response = await fetch('/spotify/current-song');
    if (!response.ok) {
      setSong({});
      return;
    }
    const data = await response.json();
    setSong(data);
    console.log(data);
  } catch (error) {
    // 可添加错误处理，比如日志或用户提示
    console.error('获取当前歌曲失败:', error);
    setSong({});
  }
};

// 组件加载时调用一次，之后每秒轮询
useEffect(() => {
  // 初始化调用一次，拿到初始数据
  fetchCurrentSong();
  
  // 设置每秒轮询的定时器
  const interval = setInterval(fetchCurrentSong, 1000);
  
  // 组件卸载时清理定时器，避免内存泄漏
  return () => clearInterval(interval);
}, []); // 空依赖数组确保只在组件挂载/卸载时执行

// 其他逻辑正常调用
getRoomdetails();

关键说明 #

• fetchCurrentSong是纯业务逻辑函数，仅处理API请求和状态更新，不包含Hook，规避了Hook调用违规问题。
• 顶层useEffect通过空依赖数组，保证只在组件首次挂载时执行：先触发一次API请求拿到初始数据，再启动定时轮询。
• 返回的清理函数会在组件卸载时清除定时器，避免不必要的资源占用。

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