时间戳

首页 > 解决方案 > ReactJS - 仅在窗口对象（Spotify SDK）上完全加载第三方库时运行 useEffect

javascript - ReactJS - 仅在窗口对象（Spotify SDK）上完全加载第三方库时运行 useEffect

问题描述

我正在尝试在组件挂载时初始化 Spotify SDK，并将实例保持在我的 Redux 状态中。因此，在我的 DashboardPage 视图中，我正在运行 useEffect，它调度 connectPlayer 操作来初始化播放器。

问题是它有效，但并非总是如此。它每 1-2 次刷新尝试运行一次。如何确保仅在 window.Spotify 对象可用时才调度此操作？我尝试过使用 if 语句并将其添加到依赖项数组中。

useEffect(() => {
    window.onSpotifyWebPlaybackSDKReady = () => {
      console.log("ready");
      dispatch(connectPlayer());
    };
  }, []);

这是我的动作创建者：

const playerSlice = createSlice({
  name: "player",
  initialState,
  reducers: {
    connectPlayer: state => {
      const playerInst = new window.Spotify.Player({
        name: "Default Player",
        getOAuthToken: cb => cb(localStorage.getItem("access_token")),
        volume: 0.2
      });

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

      playerInst.addListener("player_state_changed", state => {
        console.log("player_state_changed", state);
      });

      playerInst.connect();

      state.playerInstance = playerInst;
    }
  }
});

我正在像这样在 public/index.html 中加载 Spotify SDK

<script src="https://sdk.scdn.co/spotify-player.js"></script>

标签： javascriptreactjsreduxreact-redux

解决方案

  useEffect(() => {
    window.onload = () => {
      window.onSpotifyWebPlaybackSDKReady = () => {
        console.log("ready");
        dispatch(connectPlayer());
       };
    }
  }, [])

推荐阅读