Javascript 反应：如何在钩子中添加状态更改事件侦听器？

我正在制作一个我在网上找到的小音乐组件。目前，它工作正常，但我尝试使en event listener在音频组件播放或不播放时切换状态变量

目前，每当用户单击按钮时，我都会手动切换此变量。但是，如果用户使用键盘上的播放/暂停按钮进行切换，“isplay”的状态变量不会改变，除非我在

onplay

和

onpause

事件侦听器上进行切换

不幸的是，这破坏了钩子的整个功能，我也不知道该怎么解决它

代码沙盒：

这是破坏它的部分：[src/hooks/usemusiclayer.js-line:7]

useffect（（）=>{
if（state.audioPlayer）{
//=>应用这些事件侦听器****启动所有内容！
//console.log（state.audioPlayer）；
//state.audioPlayer.onplay=（事件）=>{
//setState（（state）=>（{…state，isPlaying:true}））；
//   };
//state.audioPlayer.onpause=（事件）=>{
//setState（（state）=>（{…state，isPlaying:false}））；
//   };
state.audioPlayer.onedded=事件=>{
playNextTrack（）；
};
}
}，[state，playNextTrack]）；

oneded

事件工作正常。。一点也不麻烦。。但其他人却把这段经历搞砸了

更新：将

setState

移出

useffect

添加此方法：

函数切换暂停（）{
设置状态（（状态）=>({
……国家，
显示：state.audioPlayer？！state.audioPlayer.paused:false，
}));
}

并更新

useffect

useffect（（）=>{
if（state.audioPlayer）{
console.log（state.audioPlayer）；
state.audioPlayer.onplay=（事件：事件）=>{
切换暂停（）；
};
state.audioPlayer.onpause=（事件：事件）=>{
切换暂停（）；
};
state.audioPlayer.onended=（事件：事件）=>{
playNextTrack（）；
};
}
}，[state，playNextTrack]）；

然而，这仍然会引起一些问题

对实际问题本身的澄清

---

第一个

状态.audioPlayer

结束后，事件侦听器不会传输到下一个音频组件，而通过不将

onplay

和

onpause

侦听器写入

useffect

，

oneded

确实是重新创建的，它可以工作。

代码本身没有实际问题。它归结为各种事件处理程序。

onpause

事件由导致同一事件中发生多个状态更改的

onned

隐式触发

---

现在已完全工作。

不要将React钩子（

useffect（）

）与传统状态管理（

setState（）

）混合使用。改用

useState（）

。我明白了。。。我已经对此进行了很多测试，useEffect是唯一一种为存储在状态中的

音频组件触发
事件侦听器的方法。如何将此侦听器从
useffect
移动？我可以创建一个“切换暂停”方法，该方法查看
state.audioPlayer.paused
属性，以便在触发时切换
isPlaying
变量，然后使用该方法切换状态。检查更新的问题