React Video：调用subscribeToStateChange时报TypeError问题求助

看起来你遇到的问题主要来自两个核心点：播放器实例的引用未正确初始化，以及useEffect钩子的写法存在逻辑错误。我来一步步帮你梳理解决方案：

1. 先确认 playerRef 是否正确指向播放器实例 #

这个报错最常见的原因是 playerRef.current 并没有拿到真正的播放器实例——可能是null、DOM元素，或者播放器还没完成加载初始化。

比如如果你用的是第三方播放器（如YouTube iframe播放器、自定义封装的播放器组件），一定要确保在播放器完全就绪后，再把实例赋值给ref：

const playerRef = React.useRef(null);

// 示例：绑定播放器的就绪回调（不同播放器的回调名称可能有差异）
const handlePlayerReady = (event) => {
  // 将播放器实例存入ref
  playerRef.current = event.target;
};

// 在播放器组件上挂载就绪回调
<PlayerComponent onReady={handlePlayerReady} />

2. 修正你的useEffect写法 #

你的useEffect存在两个关键错误：

• 直接传递 setstate(player?.getState()) 给订阅方法，这相当于立即执行setstate并把返回值传进去，但播放器需要的是一个状态变化时触发的回调函数。
• 没有做实例存在性检查，也没有清理订阅逻辑，容易引发内存泄漏。

修正后的代码示例：

React.useEffect(() => {
  const player = playerRef.current;
  // 先判断播放器实例是否存在，避免空值调用报错
  if (!player) return;

  // 定义状态变化的回调函数，播放器会自动把最新状态传入
  const handleStateChange = (newState) => {
    setstate(newState);
    // 如果你需要手动获取状态，也可以在这里调用player.getState()，但通常回调会直接返回最新值
    // setstate(player.getState());
  };

  // 订阅状态变化
  player.subscribeToStateChange(handleStateChange);

  // 组件卸载时取消订阅，防止内存泄漏
  return () => {
    // 注意：多数播放器会提供对应的取消订阅方法，比如unsubscribeFromStateChange
    if (player.unsubscribeFromStateChange) {
      player.unsubscribeFromStateChange(handleStateChange);
    }
  };
}, []); // 空依赖数组，确保只在组件挂载时执行一次订阅

3. 额外排查项 #

• 检查方法名拼写：确认播放器的状态订阅方法确实是 subscribeToStateChange（有没有大小写错误、单词拼写失误？比如部分库可能命名为 onStateChange）。
• 如果是自定义播放器类，确认它确实实现了 subscribeToStateChange 方法，且该方法接收一个回调函数作为参数。

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