绝对 URL 的 HTML 音频 src 在 React 组件中不起作用

Question

我有一个简单的音乐网络应用程序，可以在单击时更改音乐和图像封面，问题是当我单击一首歌曲时，封面图像正确更改但音频源不播放（src 属性设置正确但它是无法播放）

import React, {useState, useEffect} from "react";

const App = () => {
  const [songs, setSongs] = useState([]);
  const [playing, setPlaying] = useState({});
  const server_url = `http://localhost:8765`;

  useEffect(() => {
    fetch(server_url)
    .then(res => res.json())
    .then(jsonRes => {
      
      setPlaying(jsonRes.songs[0]);
      setSongs(jsonRes.songs);
    });
    
  }, []);
  
  return (
    <div>
      <div>
        <img src={`${server_url}/music/imgs/${playing.img}`} width="200" height="200" />
        <audio controls>
          <source src={`${server_url}/music/mp3/${playing.mp3}`} type="audio/mpeg" />
          Your browser does not support the audio element.
        </audio>
      </div>
      <div>
        <ul>
        {
        songs.map(song => {
          return (
            <li key={song.id} onClick={() => setPlaying(song)}>{song.name}</li>
          )
        })
        }
        </ul>
      </div>
    </div>
  );
}

export default App;

来自 localhost:8765 的响应是这样的：

   {"songs":
      [
{"id":1,"name":"Hello","singer":"Adele","img":"adele.png","type":"pop","mp3":"Adele.mp3"},
{"id":2,"name":"de una vez","singer":"Selena gomez","img":"selena.png","type":"pop","mp3":"Selena.mp3"},
{"id":3,"name":"Bayda","singer":"Navid","img":"navid.png","type":"pop","mp3":"Navid.mp3"},
{"id":4,"name":"Takin' Back My Love ","singer":"Enrique Iglesias","img":"enrique.png","type":"Pop","mp3":"Enrique.mp3"}
]
}

Answer 1

您的 React 容器组件最初将使用损坏的图像和音频播放器进行渲染。音频播放器无法恢复，因此第二个音频 source 元素无法正确加载

1. 当获取数据调用需要时间时，您应该阻止未定义的歌曲渲染或设置默认歌曲播放。 详细解答：在useEffect 之后添加一个新的第二个return 语句。当 songs 是一个空数组（你在第 4 行设置为默认值）然后 return 一个微调器或 return null （React 不会渲染组件，它基本上被跳过）。或次要解决方案是在第 4 行设置更好的默认值，使其成为具有有效路径的图像和歌曲，以便在长时间运行的 fetch data 调用之前加载。
2. 在现有渲染中，将歌曲设置为自动播放，这样用户就无需按播放。 详细解答：在音频 JSX 元素上使用 autoplay HTML 属性（即<audio controls autoplay>）
3. 为您的获取数据调用添加防御性代码。在您的useEffect 中添加try / catch，以便捕获和处理服务器错误。为了防止您的组件崩溃