React：如何在钩子中添加 state 更改事件侦听器？

Question

我正在研究我在网上找到的一个小音乐组件。 目前它工作正常，但我试图让 en 事件监听器在音频组件播放或不播放时切换 state 变量。

目前，每当用户单击按钮时，我都会手动切换此变量。 但是，如果用户使用键盘上的播放/暂停按钮进行切换，则“isPlaying”的 state 变量不会改变，除非我在onplay和onpause事件侦听器上切换它。

不幸的是，这破坏了钩子的整个功能，我不确定该怎么做才能解决它。

此处的代码沙盒： https://codesandbox.io/s/freaking-music-player-ldxde?file=/src/hooks/useMusicPlayer.js

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

useEffect(() => {
    if (state.audioPlayer) {
      //  => Applying these event listeners **** up everything!
      // console.log(state.audioPlayer);
      //   state.audioPlayer.onplay = (event) => {
      //     setState((state) => ({ ...state, isPlaying: true }));
      //   };
      //   state.audioPlayer.onpause = (event) => {
      //     setState((state) => ({ ...state, isPlaying: false }));
      //   };
      state.audioPlayer.onended = event => {
        playNextTrack();
      };
    }
  }, [state, playNextTrack]);

onended事件运行良好.. 没有任何问题.. 但其他事件正在破坏体验。

更新：将setState移出useEffect

添加此方法：

  function togglePause() {
    setState((state) => ({
      ...state,
      isPlaying: state.audioPlayer ? !state.audioPlayer.paused : false,
    }));
  }

并更新useEffect

  useEffect(() => {
    if (state.audioPlayer) {
      console.log(state.audioPlayer);
      state.audioPlayer.onplay = (event: Event) => {
        togglePause();
      };
      state.audioPlayer.onpause = (event: Event) => {
        togglePause();
      };
      state.audioPlayer.onended = (event: Event) => {
        playNextTrack();
      };
    }
  }, [state, playNextTrack]);

然而，这仍然会导致问题..

澄清实际问题本身

一旦第一个state.audioPlayer ended ，事件侦听器不会转移到下一个音频组件，而通过没有在useEffect中编写onplay和onpause侦听器，确实会重新创建onended并且它可以工作。

Answer 1

代码本身没有实际问题。 它归结为各种事件处理程序。 onpause事件由onended隐式触发，导致多个 state 更改发生在同一事件中。

代码沙盒现在可以正常工作了。