React组件间共享Spotify Player方法的问题及报错解决

问题根源 #

你通过{...playerInstance}复制Player实例时，仅复制了实例的自有可枚举属性，而SDK提供的togglePlay、setVolume等方法属于原型链上的方法，无法被展开操作符捕获，导致存储到state的对象丢失了这些核心方法。

解决方案 #

1. 直接将Player实例存入state，无需复制操作
2. 单独维护播放状态（playbackState）和设备ID（deviceId）的state，避免修改Player实例本身，确保组件能感知状态变化

修改后的SpotifyPlayerContext.jsx #

import React, { createContext, useState, useEffect } from 'react'
import { useSelector } from 'react-redux'

export const SpotifyPlayerContext = createContext()

export const SpotifyPlayerProvider = ({ children }) => {
    const user = useSelector(state => state.user.value)
    const [spotifyPlayer, setSpotifyPlayer] = useState(null)
    const [playbackState, setPlaybackState] = useState(null)
    const [deviceId, setDeviceId] = useState(null)

    const initSpotifyPlayer = () => {
        // 避免重复加载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 = initPlayer
        document.body.appendChild(script)
    }

    const initPlayer = () => {
        const playerInstance = new window.Spotify.Player({
            name: "Figure Out The Lyrics",
            getOAuthToken: (cb) => { cb(user.token) }
        })

        playerInstance.connect()
        
        playerInstance.addListener("ready", ({ device_id }) => {
            console.log("Device ID", device_id)
            setDeviceId(device_id)
            setSpotifyPlayer(playerInstance)
        })

        playerInstance.addListener("player_state_changed", state => {
            console.log('player state changed', state);
            setPlaybackState(state)
        })

        // 可选：添加错误监听便于调试
        playerInstance.addListener("initialization_error", ({ message }) => console.error(message));
        playerInstance.addListener("authentication_error", ({ message }) => console.error(message));
    }

    // 当用户token更新时，同步更新Player的token获取逻辑
    useEffect(() => {
        if (spotifyPlayer) {
            spotifyPlayer._options.getOAuthToken = (cb) => cb(user.token)
        }
    }, [user.token, spotifyPlayer])

    const value = { 
        spotifyPlayer, 
        playbackState, 
        deviceId, 
        initSpotifyPlayer 
    }

    return (
        <SpotifyPlayerContext.Provider value={value}>
            {children}
        </SpotifyPlayerContext.Provider>
    )
}

export default SpotifyPlayerContext

修改后的Player.jsx #

import React, { useContext, useEffect } from "react"
import SpotifyPlayerContext from "../SpotifyPlayerContext"

const Player = ({ spotifyAPI }) => {
    const { spotifyPlayer, playbackState, deviceId } = useContext(SpotifyPlayerContext)

    useEffect(() => {
        if (!spotifyPlayer || !deviceId) return
        // 当Player就绪且无播放状态时，转移播放到当前设备
        if (!playbackState) {
            spotifyAPI.transferMyPlayback([deviceId])
        }
    }, [spotifyPlayer, playbackState, deviceId, spotifyAPI])

    const handleTogglePlay = () => {
        if (spotifyPlayer) {
            spotifyPlayer.togglePlay().catch(err => console.error("播放控制失败：", err))
        }
    }

    return playbackState ? (
        <button onClick={handleTogglePlay}>
            {playbackState.paused ? "播放" : "暂停"}
        </button>
    ) : (
        <div>loading</div>
    )
}

export default Player

关键修改说明 #

• 直接存储Player实例，完整保留原型链上的所有方法
• 将playback状态和deviceId抽离为独立state，避免修改Player实例，确保组件能正确触发重渲染
• 优化SDK加载逻辑，防止重复加载脚本
• 添加token更新监听，保证Player始终能获取到最新的用户授权token
• 为播放控制添加错误捕获，便于调试排查问题

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