React中设置HTMLAudioElement音量时报可选链赋值错误如何解决？

错误原因 #

• 赋值表达式左侧不允许使用可选链操作符?.，你编写的musicPlayers.current?.volume = volume不符合JavaScript语法规范，引擎无法处理当可选链返回空时的赋值逻辑
• 音频实例变量定义错误：你需要用useRef存储可变的音频实例，普通变量没有.current属性，且你的原始定义缺少赋值等号，语法存在错误
• HTMLAudioElement的volume属性仅接受0~1范围的浮点数，你当前使用0~100范围的数值直接赋值会超出合法范围
• 滑块的onChange事件返回的e.target.value为字符串类型，直接存入数字类型的useState会导致类型不匹配

修复步骤 #

1. 替换普通变量为useRef存储音频实例
2. 赋值前先判断音频实例是否存在，规避可选链在赋值左侧的语法错误
3. 给volume值做比例转换，适配0~1的合法取值范围
4. 滑块事件触发时将字符串类型的取值转为数字

修复后完整代码 #

import { useState, useRef, useEffect } from 'react'

// 组件内部代码
const [volume, setVolume] = useState<number>(50)
// 用useRef存储音频实例
const musicPlayers = useRef<HTMLAudioElement | null>(
  typeof Audio !== "undefined" ? new Audio("") : null
);

useEffect(() => {
  // 先判断实例存在再赋值，不要用可选链在左侧
  if (musicPlayers.current) {
    // 把0~100的数值转为0~1的浮点数
    musicPlayers.current.volume = volume / 100
  }
}, [volume]);

return <input
  type="range"
  className="w-full"
  min={0}
  max={100}
  value={volume}
  // 把字符串转成数字再存到state
  onChange={(e) => setVolume(Number(e.target.value))}
/>

内容的提问来源于stack exchange，提问作者Maxime Ghéraille