React组件状态变更后如何更新音频播放器的URL？

完全可以在组件状态发生变更后修改音频播放器的URL，播放器始终播放首次加载的音频、不响应新URL的问题，不属于状态修改逻辑的错误，是浏览器原生<audio>元素的更新机制特性导致的。

• 原生<audio>元素的嵌套<source>子节点，仅会在<audio>元素首次挂载时读取一次src属性值加载资源。
• 后续即便组件状态更新、source节点的src属性发生变化，浏览器也不会自动重新拉取新的音频资源，必须手动触发重载逻辑才能加载新地址内容。

方案1：直接在<audio>标签上绑定src属性（最简洁） #

放弃嵌套<source>的写法，直接把URL绑定在<audio>标签本身的src属性上，React在检测到src值变化时会自动触发浏览器的资源重载逻辑：

<audio controls src={this.state.audioUrl}>
  你的浏览器暂不支持音频播放
</audio>

• 这种写法不需要额外的手动逻辑，能自动跟随state.audioUrl的变化加载对应音频，是开发中最常用的实现方式。

方案2：给<audio>元素绑定唯一key（兼容原有嵌套source写法） #

如果业务场景必须保留嵌套<source>的结构，可以给<audio>标签加一个和当前音频URL绑定的key属性。当URL值变化时，React会直接销毁旧的播放器DOM实例、重新创建新的播放器元素，自然会加载新地址的资源：

<audio controls key={this.state.audioUrl}>
  {this.state.audioUrl === "" 
    ? <p>Nothing to play yet</p>
    : <source src={this.state.audioUrl} type="audio/wav" />
  }
</audio>

• 注意：key直接绑定audioUrl值即可，不要使用随机数或渲染次数作为key值，避免不必要的DOM重建损耗性能。

方案3：手动触发播放器重载（精细控制场景） #

如果需要对播放器行为做精细控制，可以给<audio>元素绑定ref引用，在拿到新的音频URL、完成状态更新后，手动调用原生重载方法：

1. 组件初始化时创建ref实例：

   this.audioPlayerRef = React.createRef();
   

2. 接口拿到新URL后，在setState的回调中触发重载：

   axios.post("...", data)
     .then(({ data }) => {
       this.setState({ audioUrl: data.audioUrl }, () => {
         // DOM更新完成后调用原生load方法重置播放器
         this.audioPlayerRef.current?.load();
       });
     });
   

3. JSX中给audio标签绑定ref：

   <audio controls ref={this.audioPlayerRef}>
     {this.state.audioUrl === "" 
       ? "Nothing to play yet"
       : <source src={this.state.audioUrl} type="audio/wav" />
     }
   </audio>
   

当前实现的handleChange方法存在参数缺失与this绑定问题，无法正常更新输入框的受控值，需要调整为类属性绑定形式接收事件对象：

handleChange = (event) => {
  this.setState({ textVal: event.target.value });
}

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