React中使用.map生成按钮播放MP3音频无声音问题求助

你的代码存在两个核心问题导致点击按钮无声音：

• play方法的this绑定错误：直接将audio.play传递给onClick，点击时play函数的执行上下文（this）不再指向创建的Audio实例，无法正常触发播放。
• 组件重渲染时Audio实例被重复创建：每次组件重新渲染（比如父组件状态更新），map循环都会生成新的Audio对象，旧实例被丢弃，可能导致播放逻辑失效。

修复方案 #

方案1：箭头函数包裹play调用（快速修复）

修改onClick回调，用箭头函数确保play方法的this指向正确的Audio实例，同时添加key属性避免React渲染警告：

<div>{dieren.map((dier:Dier) =>{
  const audio = new Audio(dier.geluid)
  return <div key={dier.dier}>
           <div>{dier.dier}</div>
           <button onClick={() => audio.play()}>maak geluid</button>
       </div>})}
</div>

方案2：useRef缓存Audio实例（更稳定方案）

如果组件会频繁重渲染，用useRef缓存每个Audio实例，避免重复创建，同时在组件卸载时清理资源：

import { useRef, useEffect } from 'react';

// 组件内部逻辑
const audioRefs = useRef<Record<string, HTMLAudioElement>>({});

useEffect(() => {
  // 初始化音频实例
  dieren.forEach(dier => {
    if (!audioRefs.current[dier.dier]) {
      audioRefs.current[dier.dier] = new Audio(dier.geluid);
    }
  });

  // 组件卸载时清理音频资源
  return () => {
    Object.values(audioRefs.current).forEach(audio => {
      audio.pause();
      audio.src = '';
    });
  };
}, [dieren]);

return (
  <div>
    {dieren.map((dier:Dier) => (
      <div key={dier.dier}>
        <div>{dier.dier}</div>
        <button onClick={() => audioRefs.current[dier.dier].play()}>maak geluid</button>
      </div>
    ))}
  </div>
);

额外排查点 #

• 检查dier.geluid的音频链接是否有效，可直接在浏览器地址栏打开链接确认能否播放。
• 确认浏览器未静音，且音频链接不存在跨域问题（若跨域需服务器配置CORS）。

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