基于GatsbyJs的react-player项目出现解析错误如何解决？

问题原因 #

你遇到的语法报错和GatsbyJs无关，是React useState Hook的调用语法错误：

• 第2行的useState{false}错误使用了花括号{}传递参数，Hook 调用需要用圆括号()包裹参数，应该改为useState(false)。

修正后完整代码 #

import { useState } from 'react'
import ResponsivePlayer from 'react-player/responsive'

const Lesson = () => {
  const [watchComplete, setWatchComplete] = useState(false)

  const handleWatchComplete = ({ played }) => {
    console.log(played)
    // 额外逻辑示例：播放进度超过95%标记为观看完成
    if (played > 0.95) {
      setWatchComplete(true)
    }
  }

  return (
    <div>
      <ResponsivePlayer
        url="https://www.youtube.com/watch?v=ovJcsL7vyrk"
        onProgress={handleWatchComplete}
      />
    </div>
  )
}

export default Lesson

补充说明 #

• 注意顶部要先从react包中导入useState，否则会触发未定义报错
• onProgress 回调返回的played字段是0-1区间的进度比例，如需计算实际播放时长，可以配合onDuration回调获取总视频时长后相乘计算

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