无法读取 Spotify.Player 的 null 属性

Question

我目前正在开发一个使用 Spotify Web API 及其 Playback SDK 的项目。我按照他们的操作教程阅读文档，但不断遇到错误。我尝试在网上寻找答案，但找不到我的具体问题。

我正在 React 中创建我的应用程序，这就是 WebPlayback 组件的样子。

import React, { useState, useEffect } from 'react';

const track = {
    name: "",
    album: {
        images: [
            { url: "" }
        ]
    },
    artists: [
        { name: "" }
    ]
}

function WebPlayback(props) {

    const [is_paused, setPaused] = useState(false);
    const [is_active, setActive] = useState(false);
    const [player, setPlayer] = useState(undefined);
    const [current_track, setTrack] = useState(track);

    useEffect(() => {

        const script = document.createElement("script");
        script.src = "https://sdk.scdn.co/spotify-player.js";
        script.async = true;

        document.body.appendChild(script);

        window.onSpotifyWebPlaybackSDKReady = () => {

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

            player.addListener('ready', ({ device_id }) => {
                console.log('Ready with Device ID', device_id);
            });

            player.addListener('not_ready', ({ device_id }) => {
                console.log('Device ID has gone offline', device_id);
            });

            player.addListener('player_state_changed', ( state => {

                console.log(player)

                if (!state) {
                    return;
                }

                setTrack(state.track_window.current_track);
                setPaused(state.paused);

                player.getCurrentState().then( state => {
                    (!state)? setActive(false) : setActive(true)
                });

            }));

            player.connect();

        };
    }, []);

    if (!is_active) {
        return (
            <>
                <div className="container">
                    <div className="main-wrapper">
                        <b> Instance not active. Transfer your playback using your Spotify app </b>
                    </div>
                </div>
            </>)
    } else {
        console.log(player)
        return (
            <>
                <div className="container">
                    <div className="main-wrapper">

                        <img src={current_track.album.images[0].url} className="now-playing__cover" alt="" />

                        <div className="now-playing__side">
                            <div className="now-playing__name">{current_track.name}</div>
                            <div className="now-playing__artist">{current_track.artists[0].name}</div>
                            <button className="btn-spotify" onClick={() => { player.previousTrack() }} >
                                &lt;&lt;
                            </button>

                            <button className="btn-spotify" onClick={() => { player.togglePlay() }} >
                                { is_paused ? "PLAY" : "PAUSE" }
                            </button>

                            <button className="btn-spotify" onClick={() => { player.nextTrack() }} >
                                &gt;&gt;
                            </button>

                        </div>
                    </div>
                </div>
            </>
        );
    }
}

export default WebPlayback

发生的错误是某些函数无法工作，因为 React 将它们视为 null。

我的假设是 React 实际上并没有将我的状态变量设置为 Spotify.Player 对象。 例如，如果我将变量的名称从 player 更改为 temp，当我尝试调用第一个 .addListener() 函数时，我会收到“无法读取未定义的属性”错误。

type window.onSpotifyWebPlaybackSDKReady = () => {

            const **temp** = new window.Spotify.Player({
                name: 'Web Playback SDK Quick Start Player',
                getOAuthToken: cb => { cb(props.token); }
            });
            setPlayer(**temp**);

            player.addListener('ready', ({ device_id }) => {
                console.log('Ready with Device ID', device_id);
            });

            player.addListener('not_ready', ({ device_id }) => {
                console.log('Device ID has gone offline', device_id);
            });

            player.addListener('player_state_changed', ( state => {

                console.log(player)

                if (!state) {
                    return;
                }

                setTrack(state.track_window.current_track);
                setPaused(state.paused);

                player.getCurrentState().then( state => {
                    (!state)? setActive(false) : setActive(true)
                });

            }));

            player.connect();

        };here

对我来说，这看起来像是没有设置我的玩家变量，但我不知道为什么它会这样做。我在 React 方面工作不多，而且对 API 还很陌生，所以任何帮助将不胜感激！

提前致谢！

Answer 1

我最终让它工作了，但我忘记为我的应用程序安装react-spotify-web-playback包装器。

我在应用程序的根目录中运行了“npm i react-spotify-web-playback”。