ReactJS中Spotify Webplayback SDK未定义问题求助

问题根源 #

1. JSX中直接渲染的<script>标签代码，和React组件内函数不在同一作用域，即便onSpotifyWebPlaybackSDKReady触发了handleInit，也无法正确获取SDK注入的Spotify对象。
2. 直接在JSX里写script标签，React的DOM处理逻辑会导致脚本加载和初始化时机出现偏差。

正确实现方式 #

用React的useEffect钩子动态加载SDK脚本，在脚本加载完成后绑定初始化逻辑，直接从window对象获取Spotify：

import { useEffect } from 'react';

function SpotifyPlayer({ token }) {
  useEffect(() => {
    // 避免重复加载SDK
    if (window.Spotify) {
      initPlayer();
      return;
    }

    // 动态创建脚本元素
    const script = document.createElement('script');
    script.src = 'https://sdk.scdn.co/spotify-player.js';
    script.async = true;

    // 脚本加载完成后绑定初始化逻辑
    script.onload = () => {
      window.onSpotifyWebPlaybackSDKReady = initPlayer;
    };

    // 将脚本添加到页面
    document.body.appendChild(script);

    // 组件卸载时清理资源
    return () => {
      document.body.removeChild(script);
      delete window.onSpotifyWebPlaybackSDKReady;
    };
  }, [token]);

  const initPlayer = () => {
    // 从window对象获取Spotify
    const { Spotify } = window;
    if (!Spotify) return;

    const player = new Spotify.Player({
      name: 'Web Playback SDK Quick Start Player',
      getOAuthToken: (cb) => { cb(token); },
      volume: 0.5
    });

    // 可选：添加播放器事件监听
    player.addListener('ready', ({ device_id }) => {
      console.log('播放器就绪，设备ID：', device_id);
    });

    player.addListener('authentication_error', ({ message }) => {
      console.error('认证错误：', message);
    });

    player.connect();
  };

  return <div>Spotify播放器加载中...</div>;
}

export default SpotifyPlayer;

关键要点 #

• 动态创建script标签，确保脚本加载过程可控，避免JSX渲染带来的作用域问题。
• 直接通过window.Spotify访问SDK对象，明确指向全局作用域下的SDK实例。
• 将token加入useEffect依赖数组，确保token更新时重新初始化播放器。
• 组件卸载时清理脚本和绑定的事件，避免内存泄漏。

原写法失效原因 #

你之前在JSX中添加的第二个<script>标签运行在全局作用域，无法直接访问组件内的handleInit局部函数；即便触发了该函数，组件内未明确指向window.Spotify，导致报“Spotify未定义”错误。

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