React使用useRef绑定audio元素调play()报undefined错误的解决方案求助

报错核心原因 #

出现这个报错的本质是代码执行时序错配：useRef绑定的DOM引用，只有在组件完成挂载、JSX渲染到真实DOM之后才会被赋值。你目前在组件的函数渲染阶段直接调用play()，此时audioRef.current还处于初始空状态，拿不到真实的audio DOM元素，自然会触发“读取undefined上的play属性”的错误。

分步修复操作 #

• 移除渲染阶段的直接播放逻辑
  删掉组件函数体里直接写的这段代码：

  if (props.play === "true"){
      play()
  }
  

  组件函数体的所有代码会在每次渲染时同步执行，这个阶段DOM还没挂载完成，ref不可能拿到对应元素，绝对不能把DOM操作逻辑直接写在这里。
• 给play函数增加空值防护
  避免极端时序下出现ref未绑定就调用方法的报错，修改后的play函数：

  function play(){
      const audioPlayer = audioRef.current
      // 先判断DOM元素存在，再执行播放操作
      if (!audioPlayer) return
      // 补充catch捕获浏览器自动播放权限拦截的报错
      audioPlayer.play().catch(err => {
          console.log("播放触发失败：", err)
      })
  }
  

• 用useEffect实现自动播放逻辑
  等DOM挂载完成、ref绑定成功后，再判断是否需要根据props值触发播放，避免时序错误：

  useEffect(() => {
      if (props.play) {
          play()
      }
  }, [props.play])
  

  这里要注意：原来的判断条件props.play === "true"是严格字符串匹配，如果父组件传递的是布尔类型的true/false，这个判断永远不会生效，直接判断props.play的真值即可覆盖两种传参场景。
• 修正其他潜在运行问题
  1. 当前audio标签的src写死为无效值"url"，就算DOM绑定正常，音频资源也无法加载播放，记得替换为真实的音频资源地址。
  2. 进度条计算逻辑缺少边界判断：音频未加载完成时，event.target.duration的值为NaN，计算出的进度值会失效，导致进度条样式异常，调整update函数的判断逻辑：

     function update(event){
         // 先判断duration是有效数字，再计算进度
         if (!isNaN(event.target.duration)) {
             const progress = (event.target.currentTime / event.target.duration) * 100
             setProgVal(progress)
         }
     }
     

修复后的执行流程 #

组件完成初次渲染 → JSX挂载到真实DOM → audioRef自动绑定到对应audio元素 → 执行useEffect中的自动播放判断 → 用户点击按钮时触发对应的播放/停止逻辑，全程不会出现ref未赋值就调用DOM方法的时序问题。

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