ฟังก์ชันหยุดชั่วคราวถูกเรียกใช้ภายในส่วนประกอบปฏิกิริยา แต่ไม่มีอะไรเกิดขึ้น

Question

ฉันมีปุ่มสลับสำหรับเล่นและหยุดชั่วคราว นี่คือรหัส:

export default (props) => {
  let [soundState, setSoundState] = useState({ state: 'off' })
  let [soundId, setSoundId] = useState(null)
  let [soundSeek, setSoundSeek] = useState(null)
  var sound = new Howl({
    src: [props.url],
    html5: true,
    volume: 1,
    myMusicID: '',
    saveSeek: null,
    onpause: () => {
      console.log('pause', soundId)
    }
  })

  const onPlayHandle = () => {
    setSoundState({ state: 'playing' })
    let id = sound.play()
    setSoundId(id)
    sound.seek(soundSeek, soundId)
  }
  const onPauseHandle = () => {
    console.log('onPauseHandle', soundId)
    sound.pause(soundId)
    setSoundSeek(sound.seek(soundId))
  }
 
}

onpause กำลังลุกเป็นไฟ แต่เสียงยังคงทำงานอยู่ ...

โปรดช่วยด้วย ...

Answer 1

ทุกครั้งที่คอมโพเนนต์ของคุณแสดงผลจะมีการสร้างHowlอินสแตนซ์ใหม่ คุณต้องใช้useRefเพื่อเก็บข้อมูลอ้างอิงอินสแตนซ์:

const soundRef = useRef(new Howl({
    src: ["http://listen.vo.llnwd.net/g3/prvw/6/5/8/3/1/2255913856.mp3"],
    html5: true,
    volume: 1,
    myMusicID: "",
    saveSeek: null,
    onpause: () => {
      console.log("pause", soundId);
    }
  }));
const sound = soundRef.current;