React.js + Hygraph 音频播放器映射异常及TypeError问题求助

我用最直白的话给你讲清楚问题出在哪：

1. 所有播放器播同一音频：你大概率用了单个ref绑定所有音频元素——就像给所有杯子贴同一个名字标签，不管喊哪个名字，最后只会拿到最后贴标签的那个杯子，操作的自然是同一个音频。
2. Cannot read properties of undefined (reading 'duration')报错：要么是你在音频元素还没渲染到页面（ref还没关联到真实DOM）时就去读它的时长；要么是音频资源还没加载完，duration属性还没生成，你就急着去拿它的值。

第一步：把单个播放器做成独立子组件 #

每个播放器要有自己的专属ref，不能共用。我们把单个音频播放器拆成独立的小组件，每个组件只管自己的音频：

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

// 单个音频播放器组件，每个实例都有自己的ref和状态
function AudioPlayer({ audioUrl }) {
  // 这个ref只属于当前播放器，和其他播放器无关
  const audioRef = useRef(null);
  const [totalDuration, setTotalDuration] = useState(0);
  const [currentPlayTime, setCurrentPlayTime] = useState(0);
  const [isPlaying, setIsPlaying] = useState(false);

  // 等音频加载完成后再获取时长，避免报错
  useEffect(() => {
    const audioElement = audioRef.current;
    // 如果ref还没绑定到真实元素，直接退出
    if (!audioElement) return;

    // 音频元数据加载完成时，获取总时长
    const handleMetadataLoaded = () => {
      setTotalDuration(audioElement.duration);
    };

    // 播放时实时更新当前播放时间
    const handleTimeUpdate = () => {
      setCurrentPlayTime(audioElement.currentTime);
    };

    // 给音频元素绑定监听事件
    audioElement.addEventListener('loadedmetadata', handleMetadataLoaded);
    audioElement.addEventListener('timeupdate', handleTimeUpdate);

    // 组件销毁时移除监听，避免内存泄漏
    return () => {
      audioElement.removeEventListener('loadedmetadata', handleMetadataLoaded);
      audioElement.removeEventListener('timeupdate', handleTimeUpdate);
    };
  }, []);

  // 播放/暂停按钮逻辑
  const togglePlayPause = () => {
    const audioElement = audioRef.current;
    if (!audioElement) return;

    if (isPlaying) {
      audioElement.pause();
    } else {
      audioElement.play();
    }
    setIsPlaying(!isPlaying);
  };

  return (
    <div style={{ margin: '10px 0', padding: '10px', border: '1px solid #eee' }}>
      {/* 绑定当前组件的专属ref */}
      <audio ref={audioRef} src={audioUrl} />
      <button onClick={togglePlayPause} style={{ marginRight: '10px' }}>
        {isPlaying ? '暂停' : '播放'}
      </button>
      <span>
        {Math.floor(currentPlayTime)}s / {Math.floor(totalDuration)}s
      </span>
    </div>
  );
}

export default AudioPlayer;

第二步：在父组件里映射生成播放器列表 #

把从Hygraph拿到的音频数组，逐个传给上面的子组件，每个音频对应一个独立的播放器：

import AudioPlayer from './AudioPlayer';

// 音频列表父组件
function AudioList({ audioFiles }) {
  // audioFiles是你从Hygraph获取的音频数组，每个元素要包含音频链接（比如audioUrl字段）
  return (
    <div>
      {audioFiles.map((file, index) => (
        // 每个音频生成一个独立的播放器，key用来帮React区分不同组件
        <AudioPlayer 
          key={index} 
          audioUrl={file.audioUrl} 
        />
      ))}
    </div>
  );
}

• 映射列表时一定要加key：如果你的音频有唯一ID（比如从Hygraph拿到的id字段），优先用ID当key，比用index更稳妥。
• 检查音频链接有效性：确保从Hygraph拿到的audioUrl是能直接打开的MP3链接，不能是无效地址。
• 跨域问题：如果音频存在跨域限制，浏览器可能会阻止加载，导致duration无法获取，这时候需要在Hygraph那边配置允许跨域访问。

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