反应挂钩音乐播放器点击总是播放同一首歌

Question

我正在尝试使用 React Hooks 编写音乐播放器。 该音乐播放器通过Deezer API获取乐队的前五首最著名的歌曲。

当我在任何歌曲上单击播放/暂停时，它总是播放同一首歌曲。

我知道问题出在useRef上，但我无法弄清楚如何解决它。 我阅读了许多教程和帖子，但没有一个可以解决这种情况。有人可以帮忙吗？谢谢！

import React, { useState, useEffect } from 'react';
import './App.scss';
const BASE_URL = 'https://cors-anywhere.herokuapp.com/https://api.deezer.com/artist/182/top'
function MusicPlayer(){
const [ songs, setSongs ] = useState([])
const [ isLoading, setIsLoading ] = useState(false)
const [ error, setError ] = useState(null)
const inputRef = React.useRef()
useEffect(() => {
setIsLoading(true)
fetch(BASE_URL, {headers: {
"Accept": "application/json",
"Access-Control-Allow-Origin": "*"
}})
.then (res => {
return res.ok ? res.json() : throw new Error("Mistake!")
})
.then(songs => {
setSongs(songs.data)
setIsLoading(false)
})
.catch(error => {
setError(error)
})
}, [])
if (error){ return <p> { error.message }</p> }
if (isLoading ){ return <p> Loading songs...</p> }
return(
<div>
{ songs.map( (song, i) => (
<div key={i}>
<h1>{song.title}</h1>
<img src={song.contributors[0].picture_small}/><br/>
<audio ref={inputRef} src={song.preview} />
<button onClick={() => inputRef.current.play()}>Play</button>          
<button onClick={() => inputRef.current.pause()}>Pause</button>
</div>
))
}
</div>
)
}
export default MusicPlayer

Answer 1

这应该可以做你想要的：

import ReactDOM from "react-dom";
import React, { useState, useEffect } from "react";
const BASE_URL =
"https://cors-anywhere.herokuapp.com/https://api.deezer.com/artist/182/top";
function MusicPlayer() {
const [songs, setSongs] = useState([]);
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState(null);
const [currentSong, setCurrentSong] = useState(null);
const inputRef = React.useRef();
useEffect(() => {
if (currentSong) {
inputRef.current.play();
}
console.log(currentSong);
}, [currentSong]);
useEffect(() => {
setIsLoading(true);
fetch(BASE_URL, {
headers: {
Accept: "application/json",
"Access-Control-Allow-Origin": "*"
}
})
.then(res => {
return res.ok ? res.json() : null;
})
.then(songs => {
setSongs(songs.data);
setIsLoading(false);
})
.catch(error => {
setError(error);
});
}, []);
if (error) {
return <p> {error.message}</p>;
}
if (isLoading) {
return <p> Loading songs...</p>;
}
const handlePlay = songPreview => {
if (currentSong) {
if (currentSong === songPreview) {
return inputRef.current.play();
}
}
setCurrentSong(songPreview);
};
return (
<div>
{songs.map((song, i) => (
<div key={i}>
<h1>{song.title}</h1>
<img src={song.contributors[0].picture_small} />
<br />
<audio ref={inputRef} src={currentSong} />
<button onClick={() => handlePlay(song.preview)}>Play</button>
<button onClick={() => inputRef.current.pause()}>Pause</button>
</div>
))}
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<MusicPlayer />, rootElement);

基本上，您需要跟踪当前正在播放的歌曲。

代码沙盒演示在这里。