Reactjs 使用带有React钩子的视频JS

我正在尝试使用挂钩实现一个带有React的视频js播放器。我能够初始化播放器，一切都很好，我想能够更新一个基于视频当前时间的状态。第二个

useffect

运行一次，不想继续重新渲染以更新状态（

currentTime

停留在

0

），我确信问题很简单，并且基于语法，谢谢

export default function VideoPlayer ({ videoSrc }) {
  const videoPlayerRef = useRef() // Instead of ID
  const [currentTime, setCurrentTime] = useState(null)
  const videoJSOptions = {
    autoplay: 'muted',
    fluid: true,
    controls: true,
    userActions: { hotkeys: true },
    playbackRates: [0.5, 1, 1.5, 2]
  }
  // Initialise video player
  useEffect(() => {
    const player = videojs(videoPlayerRef.current, videoJSOptions, () => {
      player.src(videoSrc)
      console.log('Player Ready')
    })
    return () => {
      player.dispose()
      console.log('Player Disposed')
    }
  }, [])

  /* Testing video properties */
  useEffect(() => {
    const player = videojs(videoPlayerRef.current)
    setCurrentTime(player.currentTime())
  }, [currentTime])

  return (
    <div>
      <video ref={videoPlayerRef} className='video-js' />
      <span>Current Time: {currentTime}</span>
      <GlobalStyle />
    </div>
  )
}

导出默认函数VideoPlayer（{videoSrc}）{
const videoPlayerRef=useRef（）//而不是ID
常量[currentTime，setCurrentTime]=useState（null）
const videoJSOptions={
自动播放：“静音”，
流体：是的，
控制：对，
用户操作：{hotkeys:true}，
回放率：[0.5,1,1.5,2]
}
//初始化视频播放器
useffect（（）=>{
const player=videojs（videoplayerf.current，videoJSOptions，（）=>{
player.src（videoSrc）
console.log（'Player Ready'）
})
return（）=>{
player.dispose（）
console.log（'Player Disposed'）
}
}, [])
/*测试视频属性*/
useffect（（）=>{
const player=videojs（videoPlayerRef.current）
setCurrentTime（player.currentTime（））
}，[currentTime]）
返回(
当前时间：{currentTime}
)
}

第二个useEffect只更新一次，因为它的依赖项数组（基本上应该在何时再次运行useEffect）只包含currentTime，而currentTime只设置了一次（在useEffect的第一次运行时）

让我知道这是否适合你