React函数式组件视频播放器onEnded回调videoId未定义问题求助

核心原因 #

你的问题本质是React函数组件的闭包特性加上事件监听的绑定时机问题：

1. 闭包捕获旧值：React函数组件每次渲染都会重新生成handlePlayerReady函数。如果videoId后续发生变化（比如从接口异步获取、组件状态更新），已经绑定到播放器的ended回调还是会捕获最初创建handlePlayerReady时的videoId值——如果当时videoId是undefined，事件触发时就会一直用这个旧值。
2. 绑定时机过早：如果handlePlayerReady在videoId还未完成赋值（比如初始状态为undefined，数据还在请求中）就执行了，此时绑定的回调自然拿不到正确的videoId，后续videoId更新也不会同步到已绑定的回调里。

具体解决方案 #

方案1：用useRef保存最新的videoId #

通过useRef存储videoId的最新值，因为ref的current属性不受闭包限制，随时能拿到最新状态：

import { useRef, useEffect } from 'react';

// 在组件内定义ref
const videoIdRef = useRef(videoId);

// 同步videoId到ref，每次videoId更新时触发
useEffect(() => {
  videoIdRef.current = videoId;
}, [videoId]);

const handlePlayerReady = (player) => {
  playerRef.current = player;

  // ...其他事件监听

  player.on('ended', () => {
    const currentVideoId = videoIdRef.current;
    console.log('exit video container :', currentVideoId);
    onEnded(currentVideoId);
  });

  // ...dispose事件
};

方案2：确保绑定事件时videoId已存在 #

在初始化播放器或调用handlePlayerReady前，先判断videoId是否有有效值，避免过早绑定：

// 比如在组件内初始化播放器的逻辑里
useEffect(() => {
  if (!videoId) return; // videoId未赋值时不执行初始化

  const player = videojs('your-player-element');
  handlePlayerReady(player);

  return () => {
    player.dispose(); // 组件卸载时清理播放器
  };
}, [videoId]); // 依赖videoId，每次更新都重新初始化

方案3：清理旧的事件监听（可选） #

如果播放器实例会被复用，每次videoId变化时，先移除旧的ended事件监听，再绑定新的：

const handlePlayerReady = (player) => {
  playerRef.current = player;

  // 先移除旧的监听（如果存在）
  player.off('ended');

  // ...其他事件监听

  player.on('ended', () => {
    console.log('exit video container :', videoId);
    onEnded(videoId);
  });

  // ...dispose事件
};

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