ReactPlayer调用seekTo()方法报错：Cannot set properties of undefined (setting 'player')及this.player未定义问题求助

这个问题我之前也碰到过，核心原因是你混淆了函数组件和类组件的写法！你写的是函数组件，却错误地用了类组件里的this来存储ReactPlayer的实例引用——函数组件根本没有自己的this上下文，所以赋值this.player = player时会触发Cannot set properties of undefined (setting 'player')错误，后续调用this.player.seekTo自然也会因为this.player是undefined而失败。

下面是修复后的完整代码，我会一步步解释改动点：

import React, { useRef } from 'react';
import ReactPlayer from 'react-player';

function VideoPlayer({ endVideo, timePlayed, controls, playing, videoDuration }) {
  // 1. 使用useRef创建一个引用对象，专门用来存储ReactPlayer实例
  const playerRef = useRef(null);

  // 2. 把onStart的逻辑抽成单独函数，让JSX结构更清晰
  const handleVideoStart = () => {
    // 3. 先判断ref的current属性是否存在（组件已挂载），再调用seekTo，避免空值报错
    if (playerRef.current) {
      playerRef.current.seekTo(timePlayed);
    }
  };

  return (
    <div className="video-player">
      <ReactPlayer
        // 4. 直接把创建好的ref传递给ReactPlayer，它会自动将实例赋值给playerRef.current
        ref={playerRef}
        url="https://res.cloudinary.com/amarachi-2812/video/upload/v1630370229/videoplayback_1_pr2hzi.mp4"
        playing={playing}
        controls={controls}
        onStart={handleVideoStart}
        onEnded={endVideo}
      />
    </div>
  );
}

额外补充的小提示： #

• 函数组件里永远不要用this来存状态或实例引用，React提供的useRef、useState这些hooks才是正确的选择
• 调用ref上的方法前一定要检查current是否存在，组件挂载完成前playerRef.current是null，直接调用会触发新的错误
• 如果你的timePlayed是动态更新的（比如用户拖动进度条后的值），可以再加个useEffect监听它的变化，实时调用seekTo：

  useEffect(() => {
    if (playerRef.current) {
      playerRef.current.seekTo(timePlayed);
    }
  }, [timePlayed]);
  

内容的提问来源于stack exchange，提问作者Iheanacho Amarachi Sharon