React playlist player - 获取数据和存储结果问题

Question

我想要达到的目标

我正在使用 Soundcloud API 为我的应用构建一个播放列表播放器小部件。我能够获取数据，但是当我需要为给定轨道实现 play/pause 功能时，我运行遇到了 design/technical 问题。

GET方法returns一首JSON曲目（歌曲）关联多种功能，如response.play()、response.pause()等。目前，我的 onClick() 暂停和播放歌曲的句柄为同一首歌曲获取新数据并覆盖当前歌曲，这不是我想要的。我希望能够播放歌曲，pause/play 它无需重新启动。

JSFiddle（无法实现 Whosebug JS/HTML/CSS 代码片段 widjet）

[-------- Working JSFiddle here !!---------]

Playlist.tsx

const SC = require('soundcloud');

SC.initialize({
  client_id: '1dff55bf515582dc759594dac5ba46e9'
});

const playIcon = 'https://www.pngfind.com/pngs/m/20-201074_play-button-png-image-background-circle-transparent-png.png';
const pauseIcon = 'https://thumbs.dreamstime.com/z/pause-button-icon-transparent-background-sign-flat-style-204042531.jpg';

async function getJson(trackId) {
  let response = await SC.stream('/tracks/' + trackId);
  return response;
} 

const Playlist = () => {
 const[playState, setPlayState] = React.useState(false);
  
 const handlePlayClick = () => {
   getJson(913128502).then((track) => {
 
     track.setVolume(0.025); //increase if you don't hear background sound
     
     playState ? track.pause() : track.play();
     setPlayState(!playState);
   });
 }
    return (
     <img src={!playState ? playIcon : pauseIcon } 
          onClick={() => { handlePlayClick() } }
          height="100" width="100" >
     </img>
  )
}

export default Playlist;

我尝试过的东西

我查看了多个 SO 帖子，试图了解如何将获取的数据存储在全局变量中。据我了解，由于同步性，这不能完全完成，我只能在函数

内部使用 track GET 响应及其相关函数

getJson(trackId).then((track) => {
   // can only call track.play() or track.pause() locally here ? 
});

为了绕过这个，我试过

let globalTrack;
getJson(trackId).then((track) => {
   globalTrack = track;
});
globalTrack.play() // undefined error

我进一步尝试使用 async/await 等其他工具，但没有成功。在这个问题上，我不知所措，失去了足够的头发。有谁知道我怎样才能实现我想要的？

Answer 1

您可以使用 useEffect() 钩子来获取轨道，它会在组件首次挂载时获取一次轨道。

https://jsfiddle.net/x7j0qwvh/20/

const [track, setTrack] = React.useState(null);

React.useEffect(() => {
  musicFetch(913128502).then((music) => {
    music.setVolume(0.025);
    setTrack(music);
 });
}, [])

React playlist player - 获取数据和存储结果问题

React playlist player - fetching data and storing the result problem

reactjs

ajax

fetch

soundcloud

我想要达到的目标

JSFiddle（无法实现 Whosebug JS/HTML/CSS 代码片段 widjet）

Playlist.tsx

我尝试过的东西