嘗試使用 React useState 更改鼓機上的聲音庫，但更改庫功能運行兩次

Question

我正在使用 React 創建一個鼓機。 到目前為止，我已經完成了所有工作，但是現在我已經嘗試實現第二個聲音庫，但在事件偵聽器方面遇到了一些問題。

到目前為止，使用 handleclick 更改銀行非常有效。 但是，當我出於某種原因使用事件偵聽器時，bank1 和 bank2 音頻都在彼此之上播放。

我不知道我的邏輯哪里出了問題。

任何幫助將不勝感激

到目前為止，這是我的代碼（對凌亂的代碼表示歉意）。

    import React, { useState, useEffect} from 'react';

const audioSamples = {
  bank1:{
  q: new Audio("http://dight310.byu.edu/media/audio/FreeLoops.com/3/3/Free%20Kick%20Sample%208-900-Free-Loops.com.mp3"),
  w: new Audio("http://www.denhaku.com/r_box/sr16/sr16sd/alloysnr.wav"),
  e: new Audio("http://dight310.byu.edu/media/audio/FreeLoops.com/5/5/Long%20Open%20Hi%20Hat%20002-1653-Free-Loops.com.mp3"),
  a: new Audio("http://dight310.byu.edu/media/audio/FreeLoops.com/4/4/Korg%20Ride%20Cymbal%202-2526-Free-Loops.com.mp3"),
  s: new Audio("http://electrongate.com/dmxfiles/DXCRASH.wav"),
  d: new Audio("http://cd.textfiles.com/10000soundssongs/WAV/COWBELL1.WAV")
  },
  bank2:{
    q: new Audio("http://cd.textfiles.com/10000soundssongs/WAV/EERIE_1.WAV"),
    w: new Audio("http://www.denhaku.com/r_box/linn/congal.wav"),
    e: new Audio("http://electrongate.com/dmxfiles/conga.wav"),
    a: new Audio("http://dight310.byu.edu/media/audio/FreeLoops.com/4/4/Korg%20Ride%20Cymbal%202-2526-Free-Loops.com.mp3"),
    s: new Audio("http://electrongate.com/dmxfiles/DXCRASH.wav"),
    d: new Audio("http://cd.textfiles.com/10000soundssongs/WAV/COWBELL1.WAV")
    }
}
   
function App() {

  const [banknum, setBanknum] = useState(1); 
 
  function changeBank() {
    setBanknum(prevBanknum => prevBanknum === 1 ? prevBanknum = 2 : prevBanknum = 1) 
  }
  console.log(banknum)
  document.addEventListener('keydown', function(e) {
 
    if(banknum === 1 && audioSamples.bank1[e.key] ){
      audioSamples.bank1[e.key].load()
      audioSamples.bank1[e.key].play()
      }
      else if (banknum === 2 && audioSamples.bank1[e.key]) {
      audioSamples.bank2[e.key].load()
      audioSamples.bank2[e.key].play()
     }
      console.log(banknum)
      }
   
    )

  

  function handleClick(e) {
    if(banknum === 1){
    audioSamples.bank1[e.target.id].play()
    }
    else if (banknum === 2) {audioSamples.bank2[e.target.id].play() }
    }

  return (
    <div id="DrumMachine" className="App" >
      <button id="q" onClick={handleClick} >Q</button>
      <button id="w" onClick={handleClick}>W</button>
      <button id="e" onClick={handleClick}>E</button>
      <button id="a" onClick={handleClick}>A</button>
      <button id="s" onClick={handleClick}>S</button>
      <button id="d" onClick={handleClick}>D</button>
      <button id ="banks" onClick={changeBank}>Change Bank
      </button>
    </div>
  );
}
export default App;

Answer 1

AddEventListener 在您的情況下呈現兩次。

改為這樣做。

  const handleEvent = useCallback((e) => {
    if (banknum === 1 && audioSamples.bank1[e.key]) {
      audioSamples.bank1[e.key].load();
      audioSamples.bank1[e.key].play();
    } else if (banknum === 2 && audioSamples.bank2[e.key]) {
      audioSamples.bank2[e.key].load();
      audioSamples.bank2[e.key].play();
    }
  }, [banknum])

  useEffect(() => {
    document.addEventListener("keydown", handleEvent);
    return () => {
      document.removeEventListener("keydown", handleEvent);
    }
  }, [banknum, handleEvent]);

在這里工作沙箱。